29790


FLOCSSでいうutilityは便利なので、たくさん使いたくなってしまいますが、  
制作時は良くても、クラス名がたくさんになってしまうと、  
CSSがまとまっておらず管理がしにくいという説もあります。

どのような制限をつけて使っていますか？  
好き放題使っても問題ないのでしょうか？

例

[code]

    /* Bottom margin */
    .u-mb-0{
        margin-bottom: 0 !important;
    }
    
    .u-mb-0dot1rem{
        margin-bottom: .1rem !important;
    }
    
    .u-mb-0dot2rem{
        margin-bottom: .2rem !important;
    }
    
    .u-mb-0dot3rem{
        margin-bottom: .3rem !important;
    }
    
[/code]

またcompornentはそれ自体にwidthやmarginなどはつけないようですが、  
するとすべてutilityで指定するのでしょうか？


CC BY-SA 3.0
2016-10-22T02:21:56.610
29788
2016-10-22T02:49:19.363
14320
question
css
FLOCSSでいうutilityについて


Component間のマージン調整は、Projectレイヤーを付与し、都度上書きを行っていくのが良いです。  
あまりutilityのみでのレイアウト調整はおすすめしません。  
付与classが膨大になる上、上書きが困難になるので。

utilityの設計自体は自由ですが、class命名にはEmmetの省略記法を用いると良いかもしれませんね。  
また、`margin`などに関しては単位を統一することで`0dot3rem`を`dot3`にしたりできますね。

Projectレイヤーによるスタイル調整は下記が参考になるかと  
[Projectレイヤーを使いこなす！ – FLOCSSで始めるCSS設計](https://www.to-r.net/media/floccs-04/)

FLOCSSを使用している参考サイトとしてはこのサイトが参考になるかもしれません。  
（おそらく、FLOCSSの提唱者の谷氏による設計が行われたものかと）

<http://tsukuruba.com/careers/>


CC BY-SA 3.0
2016-10-22T02:43:25.727
29790
2016-10-22T02:49:19.363
2016-10-22T02:49:19.363
19270
19270
29788
answer