「FLOCSSの考え方は何となく理解したけど、サンプルコードやサンプルサイトとか無いかなぁ…」
「FLOCSSを用いたコーディングのルールについてもっと詳しく知りたい…」
そんな風に思ったりしませんか？
今回はFLOCSSを用いたコーディングルールについて解説していきます。
この記事を読むことで、
「FLOCSSって使いこなせるとすごく便利な設計だ！」
と感じるはずです。
ぜひ最後までご覧ください。
目次
FLOCSSを用いたコーディングルール（サンプルコードあり）
FLOCSSや他の設計を決めたあとに、コーディングのルールを理解しておく必要があります。
FLOCSSの場合、ルールは6つです。
- クラス名はBEMベース
- 接頭辞（プレフィックス）を付ける
- クラス名はキャメルケース
- JSのクラス名は「is-」「js-」を使用
- 複数のクラスを指定可能
- カスケーディングは原則禁止
それぞれのルールについてみていきましょう。
クラス名はBEMベース
FLOCSSはBEM（Block・Element・Modifier）と共に使われます。
BEMを用いたクラス名の付け方は、[接頭辞]-[Block]__[Element]–[Modifier]です。
※接頭辞とは、「l-」というような形です。
|
1 2 |
// 例 <div class="l-header__logo--blog"></div> |
接頭辞（プレフィックス）を付ける
目的に合わせてクラス名の先頭に「l-」のような形で接頭辞を付けます。
使用する接頭辞は4つです。
- Layout（ページを構成する要素に対して使用するクラス）・・・「l-」
- Component（複数のページで再利用できる要素に対して使用するクラス）・・・「c-」
- Project（ページ単位で使用するクラス）・・・「p-」
- Utility（強制的にスタイルを当てたりする調整用のクラス）・・・「u-」
接頭辞を用いたクラス名の付け方は以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 例 // layout <div class="l-footer"></div> // component <div class="c-button"></div> // project <div class="p-home"></div> // utility <div class="u-hidden-pc"></div> |
クラス名はキャメルケース
クラス名は、一般的にはキャメルケースでクラス名を付けることが多いです。
「header_nav」のようなスネークケースの書き方だと、BEMの命名規則と間違えやすくなるため、キャメルケースが推奨されています。
|
1 2 |
// 例 <div class="is-fadeIn"></div> |
JSのクラス名は「is-」「js-」を使用
JavaScriptやjQueryでクラス名を付ける場合、JavaScriptを当てる際にクラス名の最初に「js-」を付けて、スタイルを当てる要素には「is-」を付けます。
「js-」が付いているクラス名にはスタイルをあてることは禁止になっています。
|
1 2 |
// 例 <div class="p-headerNav js-accordion is-active"></div> |
|
1 2 3 4 5 6 7 |
.p-headerNav { opacity: 0; } .is-active { opacity: 1; } |
１つの要素に対して複数のクラスを指定可能
HTMLでは１つの要素に対して複数のクラスを指定することができます。
これをマルチクラスと呼びます。
FLOCSSを用いたコーディングではマルチクラスが頻繁に使われています。
|
1 2 |
// 例 <div class="p-home u-hidden-pc"></div> |
カスケーディングは原則禁止
カスケーディングとは，ある要素のあるプロパティに対する宣言が複数あるとき，宣言の“強さ”の関係を定めて，うち 1 つの宣言だけが有効になるようにするしくみである。
カスケーディングのルールについてはFLOCSSの公式ドキュメントにも書いてあるので、引用したものを見てみましょう。
原則として、モジュール間のカスケーディング、他のモジュールを親とするセレクタを用いたカスケーディングは禁止とします。
特に同一レイヤーにおけるモジュール間のカスケーディング、例えば、次のような複数のセレクタを用いたカスケーディングは好ましくありません。
例外として、レイヤー間におけるカスケーディング、例えば、次のようなProjectレイヤーがComponentレイヤーのモジュールを変更することは許容します。
出典：FLOCSS公式
公式ドキュメントのFLOCSSの引用文を見ても理解できないと思うので、ダメな例と良い例を見比べてみましょう。
|
1 2 3 4 5 |
// ダメな例 <div class="p-main"> <img src="main.jpg" class="u-hidden-sp"> <img src="main_sp.jpg" class="u-hidden-pc"> </div> |
|
1 2 3 4 5 6 7 |
.p-main { text-align: center; } .p-main > .u-hidden-sp { // このようなスタイルの当て方はNG display: none; } |
上記の例ように、「p-」が含まれたクラス名の中に「u-」が含まれたクラスが入ってると混乱しますよね。
公式ドキュメントでは、同一のレイヤー間におけるカスケーディングはOKと書いてあります。
ですので、以下のように修正します。
|
1 2 3 4 5 |
// 良い例 <div class="p-main"> <img src="main.jpg" class="p-main__image-pc u-hidden-sp"> <img src="main_sp.jpg" class="p-main__image-sp u-hidden-pc"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// project.scss .p-main { text-align: center; } .p-main > .p-main__image-pc { // 同一レイヤーに対してスタイルを当てているのでOK margin-top: 10px; } .p-main > .p-main__image-sp { margin-top: 20px; } |
|
1 2 3 4 5 6 7 8 |
// utility.scss .u-hidden-pc { display: none !important; } .u-hidden-sp { display: none !important; } |
いかがですか。
コードがスッキリして見やすくなってませんか？
レイヤーごとにファイルを分けて書くことによって、クラス名を把握しやすくなります。
是非参考にしてみてください。
FLOCSSを用いたサンプルサイト（参考事例）
FLOCSSのCSS設計について前の章で解説しましたが、
と思ったりしませんか？
実際にFLOCSSを採用しているWebサイトをいくつか紹介していきます。
上記のサンプル以外にもたくさんFLOCSSを用いたWebサイトはあります。
ディベロッパーツールでどんな風にコードを書いてるのかを確認してみてください。
まとめ
いかがだったでしょうか。
FLOCSSを用いたCSS設計について理解できたでしょうか？
最後に今回の内容をまとめます。
- クラス名はBEMベース
- 接頭辞（プレフィックス）を付ける
- class名はキャメルケース
- JSのクラス名は「is-」「js-」を使用
- 複数のクラスを指定可能
- カスケーディングは原則禁止
FLOCSSは慣れるまでに時間がかかりますが、使いこなせると便利な設計です。
まだFLOCSSを使いこなせない人は、この記事で取り上げたサンプルサイトで使われているFLOCSSを用いたクラス名の書き方を学んでみてください。
