Project
の役割
あらかじめ定義しているものはありません。案件に応じて必要なコンポーネントを追加していってください。
プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。
Project
とComponent
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というようにすることもできます。