Project
サイト固有のまとまりを定義してパターン化します。案件に応じて追加していくところです。

Projectの役割

あらかじめ定義しているものはありません。案件に応じて必要なコンポーネントを追加していってください。

プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。

ProjectComponent

Componentは案件を超えて使い回せるもの。Projectはその案件だけで使えるもの。という認識で良いかと思います。ProjectからComponentを上書きすることはFLOCSSでは許可されています。

ProjectレイヤーがComponentレイヤーのモジュールを変更することは許容します。

命名規則

命名規則はFLOCSSに準じてもらうとこのCSSテンプレートとの整合性が取りやすいです。

Projectを示す接頭辞としてp-p-hogeというBlockのElementはp-hoge__elementです。そして、Modifierはp-hoge--modifierとなります。

BEMシステムのシンタックスである、Block、Element、Modifierに分類して構成される規則を採用します。

FLOCSSでは、オリジナルのBEMのシンタックスではなく、MindBEMding のアイデアを基本的にそのまま取り入れています。

Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというようにすることもできます。
loading...