FLOCSSについて
下記のようにComponentにmargin、padding、colorなどは付けずutilityのマルチクラスでつけるように記載がありますが、そうすると
margin、padding、colorで三つのマルチクラスをつけないといけなくならないですか?
それとも基本は上記三つをモディファイヤーとして、要素名--skinのように三つをまとめて、同じコンポーネントだがマージンだけ違う場合はそれプラスutilityで対処しろということですよね。
utilityは便利ですが、一つ以上同じ要素に使ってしまうと、
style属性でCSSを充てるのと変わらなくなってしまいますよね?
どのように使っていますか?
公式にはそこまでちゃんと記載がありません。
もっと詳細も書いてあるところはないのでしょうね。
探しても出てこないので。
*
- Component
再利用できるパターンとして、小さな単位のモジュールを定義します。
一般的によく使われるパターンであり、例えばBootstrapのComponentカテゴリなどに見られるbuttonなどが該当します。
出来る限り、最低限の機能を持ったものとして定義されるべきであり、それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。
2. Project
プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。
例えば、記事一覧や、ユーザープロフィール、画像ギャラリーなどコンテンツを構成する要素などが該当します。
3. Utility
ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。
Utilityは、Component、ProjectレイヤーのObjectを無尽蔵に増やしてしまうことを防いだり、またこれらのObject自体が持つべきではないmarginの代わりに.mbs { margin-bottom: 10px; }のようなUtility Objectを用いて、隣接するモジュールとの間隔をつくるといった役割を担います。
またclearfixテクニックのためのルールセットが定義されているヘルパークラスも、このレイヤーに含めます。で
あなたの回答
tips
プレビュー