FLOCSSの基本ルールを自分なりにまとめていくよ

私の受講するRaiseTechでは、CSSの記法としてFLOCSSを使うそうな。

CSS設計の基本とFLOCSSを作った方による書籍（柴犬でもわかるFLOCSS）を読んだので

まずは書き方のルールを己に落とし込むため書き方をまとめていきます

FLOCSSのレイヤー

まず、FLOCSSでは3つのレイヤーが存在していて、

これに適したレイヤーを選択し、クラス名をつけてあげなければなりません

• Fonudation：基本情報を書く
• Layout：大枠のレイアウトに関する記述。クラス名は「l-」で書きだし
• Object：繰り返し使われる見た目

Objectはさらに3つに分かれます

• Component：アイテムが繰り返される中で共通する装飾。クラス名は「c-」で書き出し
• Project：各アイテムの装飾。クラス名は「p-」で書き出し
• Utility：上記に当てはまらない微妙なレイアウト変更など。「u-」で書き出し

Utilityの使い道がなんとも不明瞭ですが、基本はComponentかProjectかのどちらかを使用する模様。

Projectクラスで書いてみて、この装飾何回も書いてんな…汎用性高くね？と思ったら

Componentクラスを設置してそちらに記述するようなイメージです

FLOCSSの記述ルール

以上がFLOCSSのレイヤーでした

クラスセレクタで何度も呼び出す形になると思うのですが、記述にはルールがあります。

私が見た限りでは3つです

まず、レイヤーは必ず上で紹介した順に書く必要があります

Fondation＞Layout＞Component＞Project＞Utilityですね。

次に厄介なのが、1つのタグの中に同一階層のレイヤーのクラスを複数与えてはいけないらしいです。

▼ダメな例(Componentレイヤーのクラスが一つのタグの中に共存している)

<div class="c-aaaa c-cccc">～～～</div>

▼よい例（複数クラスだがレイヤーがComponentとProjectで異なるため許される）

<div class="c-aaaa p-bbbb">～～～～</div>

最後に、CSSを書く際に同じ階層のセレクタを入れ子にして呼び出してはいけないそうです。

▼ダメな例（同一レイヤーで絞り込んでいる）

.c-aaaa .c-cccc{～}

▼よい例（入れ子になっているがレイヤーが異なるため許される）

.c-aaaa p-bbbb{～}

FLOCSSの命名規則はBEMに準拠

FLOCSSのクラス名の頭にlやらcやらuやらをつけるというのは先にもお伝えしておりますが

さらに細かい命名規則はBEMという別の記法に則ってねとおっしゃられています

なので、BEMの規則が分からんとFLOCSSでクラス名をいい感じに付けられんのです

しかしながらここでBEMについて1から100まで伝えるのは本筋から外れてしまうので

FLOCSSを書くにあたり踏襲すべきBEMのルールを搔い摘んで

• Elementっぽかったら__で単語をつなげる
• Modifireっぽかったら_で単語をつなげる

この2つが大きそうです

BEMにはBlock・Element・Modifireの3つの要素があり、

ElementはBlockを構成する要素

ModifireはBlock・Elementのビジュアルを書くためのクラスです

Blockはほかの場所でも使いまわせる1まとまりのパーツを指すそうです

構成単位とFLOCSSの構成単位は微妙に違っている中で、どんなふうに命名規則に絡んでくるのかがちょっとよくわからんのですよね！

この辺のイメージが湧いてないので、実際のコードを見ながら言語化できるようにしていきたいです

以上