aBcSiwClZ6Xycv2h.qrunch.io読者になる0CSS設計でFLOCSSを試してみたCSS投稿日:2018-10-23最終更新:2018-10-24筆者のブログで記事をみるFLOCSS設計を試した時のいろいろCSSの設計でFLOCSSというもの知り、試してみました。FLOCSSとはOOCSS、BEM、SMACCS、MCSSなどの既存のコンセプトを取り入れたCSSの設計案。命名規則はBEMの設計思想を元にしたMindBEMdingを採用。Foundation、Layout、Objectと呼ばれる3つの大レイヤーがある。大レイヤーの1つであるObjectはComponent、Project、Utilityの3つの子レイヤーで構成される。レイヤーには記述順があり、それぞれ役割がある。モジュールに対しプレフィックス(接頭辞)をつける。原則としてモジュール間のカスケーディング、他のモジュールを親とするセレクタを用いたカスケーディングは禁止している。モジュール内で完結するカスケーディング、複数のセレクタを用いることは許容されている。リセット、ベースデザインのレイヤー。ヘッダーやフッターなどのレイアウトレイヤー。最低限の機能を持ったボタンなどのレイヤー。記事やカードなどの固有なビジュアルパターンのレイヤー。マージンやパディングなどの調整用のレイヤー。レイヤーの持つ役割Foundation初期化や基本的なスタイルを記述するレイヤー。14px;}Layoutヘッダーやフッターといった大枠のスタイルを記述するレイヤー。Layoutはプレフィックスとして「l-」を記述。green;}ObjectComponent、Project、Utilityの子レイヤーを内部に持つ。Component最低限の機能を持ったものとして定義される機能単位で分割したモジュールのスタイル。Componentはプレフィックスとして「c-」を記述。block;}ProjectProjectは固有のビジュアルパターンで、Componentに該当しない要素によって構成されるスタイル。Projectはプレフィックスとして「p-」を記述。#EFEFEF;}UtilityComponent、Projectで解決することが難しい、または適切では無いといった調整用のスタイル。Utilityはプレフィックスとして「u-」を記述。5px;}命名規則はBEMによるMindBEMdingモジュールはBlock、Element、Modifierといったように分けられ、すべて存在する場合、「Block__Element--Modifier」となる。#333;}ComponentでModifierがある場合Modifierは「--modifier」として、「--(ハイフン)」を2つ記述。別パターンのデザインがある場合にModifierを作成。</li></ul>Modifierのスタイルは別パターンのデザインがある場合に作成されるので、デフォルトのBlockやElement下に記述。14px;}ProjectでModifierがある場合Modifierは「--modifier」として、「--(ハイフン)」を2つ記述。別パターンのデザインがある場合にModifierを作成。p-article__text--modifier">テキスト</p></article>Modifierのスタイルは別パターンのデザインがある場合に作成されるので、デフォルトのBlockやElement下に記述。20px;}モジュールに対しプレフィックス(接頭辞)をつける。役割を明確にするため、レイヤーの各モジュールにプレフィックスをつける。Layout:.l-*Component:.c-*Project:.p-*Utility:.u-*スタイルの詳細度を高めないように注意するスタイルの詳細度を高めないという決まりごとがあるので、セレクタを用いたカスケーディングは行わない。14px;}レイヤーの順番FLOCSSはレイヤー順が決まっているので、Foundationから順に記述していくと下記のようになる。5px;}一番下に記述される調整用の「Utility」が最も強いことになる。Layout、Object(Component、Project、Utility)の記述順は変えない。Sass(Scss)の利用FLOCSSはCSSの拡張であるSass(Scss)と相性がよい様なので、下記のように利用してみました。ディレクトリscssというフォルダ内にscssファイルを設置しています。_padding.scss分割したscssファイルをimportscssフォルダ直下にある「style.scss」ファイルに、各レイヤーのscssファイルをimportして、コンパイル時に結合するようにしています。"object/utility/**";globプラグインで複数のSass(Scss)ファイルをimportするSass(Scss)ファイルの複数のimportは「gulp-sass-glob」というプラグインを利用すると楽なので、gulpというタスクランナーを利用して、下記のように記述して運用しました。"foundation/_reset.scss";」として手動で記述し、一番最初にリセット用のscssを読み込ませています。}))});実際には「gulp-sass-glob」だけでなく、「gulp-sass」などのプラグインも読み込んでいます。globを利用すると、「**/」でそのフォルダ内に作成されたファイルは自動でimportされるので便利です。ComponentとProjectのどちらに振り分けるのかFLOCSSで設計するにあたり、一番頭を悩ませるのが、デザインのプロパティをComponentに振り分けるのか、Projectに振り分けるのか、といったことになると思います。そこで、一つの例として、下記のようなデザインで2つのProjectがある場合を考えてみます。200px;}上記のCSSからComponentを切り出してみます。6px;」を切り出しました。#ccc;」はComponentには振り分けません。これはボーダーの太さや色が変わることを想定して、Projectである「p-」に記述するべきプロパティとなります。#ccc;」を記述しても問題ないはずです。上記の例はProjectから切り出されたComponentと言えると思います。個人的な解釈になるのかもしれませんが、Componentは最低限の機能を持ったボタンとして始めからComponentとして作成されたプロパティと、共通のプロパティとしてProject内から切り出されたComponent、といったように2つのケースが存在すると考えています。この場合のHTMLに記述するクラスは下記のようになります。</div></div>ComponentとProjectによるマルチクラスになり、記述する順番としてはレイヤー順に従った場合、「c-」のComponentが「p-」のProjectの前にきます。FLOCSSで悩んだことFLOCSSでCSSの設計を行うにあたり、一番難しく悩んだことは、ProjectとComponentの関係とその理解、デザインのプロパティをComponentかProject、一体どちらに振り分けるのか、といったことでした。p-*"」といったようにComponentとProjectによるマルチクラスとして記述されることもあります。ProjectとComponentの振り分けとしては、ボタンなど、最初から最小限の機能を持ったComponentとして作成される場合もあれば、Projectに共通のプロパティがあり、Componentに切り出される場合があります。時間が経過し、デザインに変更が生じてComponentに切り出したプロパティが共通のプロパティではなくなり、固有なビジュアルパターンであるProjectのプロパティになったり、またはそのModifierになる、といったこともありえます。FLOCSSで設計してよかったことだいたいCSSが破綻していくのは規則性がないカスケーディングや、よく検討せずにセレクタを使用したがゆえの詳細度の高まりに苦労する、といったことが大きいのですが、FLOCSSで設計することによりそういったことが随分減りました。スタイルの再利用、保守性やメンテナンスにも有用だと感じました。プロパティに関して、そのデザインにとって固有なものか共通なものか、といったことを意識してコーディングできるようになったと思います。最後にFLOCSS設計はある程度の学習コストがかかると思います。個人でしか試せていませんが、真価を発揮するのはおそらくチームやグループでの活用だと思いました。最後に、ここまで読んでいただきありがとうございます。Qrunch.netサーバー提供フィードバックを送信する。