質問: FLOCSSでいうutilityは便利なので、たくさん使いたくなってしまいますが、 制作時は良くても、クラス名がたくさんになってしまうと、 CSSがまとまっておらず管理がしにくいという説もあります。 どのような制限をつけて使っていますか? 好き放題使っても問題ないのでしょうか? 例 ``` /* 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; } ``` またcompornentはそれ自体にwidthやmarginなどはつけないようですが、 するとすべてutilityで指定するのでしょうか?
回答: Component間のマージン調整は、Projectレイヤーを付与し、都度上書きを行っていくのが良いです。 あまりutilityのみでのレイアウト調整はおすすめしません。 付与classが膨大になる上、上書きが困難になるので。 utilityの設計自体は自由ですが、class命名にはEmmetの省略記法を用いると良いかもしれませんね。 また、`margin`などに関しては単位を統一することで`0dot3rem`を`dot3`にしたりできますね。 Projectレイヤーによるスタイル調整は下記が参考になるかと Projectレイヤーを使いこなす! – FLOCSSで始めるCSS設計 FLOCSSを使用している参考サイトとしてはこのサイトが参考になるかもしれません。 (おそらく、FLOCSSの提唱者の谷氏による設計が行われたものかと)