flocssについてまとめてみた

最近flocssを触っているのでいいタイミングだと思い今回まとめてみました。

flocssとは

cssの設計思想の一つで、OOCSS、SMACSS、BEMなどのコンセプトが取り入れられています。

cssでありがちなこと

基本原則

flocssでは次のようなレイヤーで構成されます。

- css/
    - foundation
    - layout
    - object
        - component
        - project
        - Utility

foundation

ブラウザのデフォルトスタイルの初期化(Reset.cssやNormalize.cssなど)や、プロジェクトにおける基本的なスタイルを定義をする場所。

layout

header,footer,メインコンテンツなどのページを構成する大枠の部分を指定する場所。
基本的にはページ内で唯一の存在になるのでIDを使用するのも可能だが、IDセレクタは高い詳細度を持つため、
接頭辞(l-◯◯など)をつけた命名規則を採用するか,[id="header"]のように属性セレクタを使用することが推奨されている。

object

OOCSSのコンセプトを元に、プロジェクトで繰り返されるビジュアルパターンをすべてObjectと定義します。

FLOCSSでのObjectは次のレイヤーに分けられます。

component

再利用できる小さな単位のモジュールを定義する場所。
※最低限の機能を持つものとして定義され、それ自体が固有の幅や色などを持つことは避けるべき。

project

プロジェクト固有のパターンで、いくつかのcomponentだったり、それに該当しない要素で構成されるもの定義する場所。

utility

projectやcomponentをむやみやたらに増やさないように
細かいスタイル調整の便利なクラスなどを定義する場所。

例えば、component間のmarginやpaddingの調整など。

命名規則

命名規則はBEMから派生したMindBEMdingを採用しています。
Block、Element、Modifierを略してBEMと言います。
Blockは大枠、Elementは大枠内のパーツ()、Modifierは大枠、または大枠内のパーツの状態が違うとき。
軽く説明するとこんな感じです。

component

接頭辞としてc-をつけます。

project

接頭辞としてp-をつけます。

utility

接頭辞としてu-をつけます。

カスケーディング

モジュール間の上書きや、他のモジュールを親とする上書きは原則禁止になっています。

.c-box {}
.c-button {}
.c-box .c-button {} //これはだめ
.p-mypage {}
.p-mypage .p-boxList {} //これはだめ

ただし、projectからcomponentモジュールは変更できます。

.c-button {}
.p-mypage .c-button {}

まとめ

bem周りは割と適当に書いてしまいましたが、別記事で書いてあるのでぜひ。↓
https://qiita.com/w-tdon/items/681d46e4b0d018ca54ff