はじめに
FLOCSSというCSS設計手法でビューを実装する機会があったのですが、公式ドキュメントや既存の記事だけでは設計に悩む部分もあったので、備忘録として設計ルールをまとめました。
FLOCSS とは
FLOCSS（フロックス） は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。
FLOCSS公式より引用
基本ルール
クラス命名規則はBEM(BEM公式) を使用
Elementはアンダーバー2つ、Modifierはハイフン2つで繋ぐ
(例) c-button__icon, c-button--red
Elementの2階層目を作るのは非推奨
⭕️ .Block__Element--Modifier
❌ .Block__Element__Element--Modifier
基本的にすべてのタグにクラス名をつける
これをすることで、何の役割を持つタグなのかをクラス名から推測できるようになる
接頭辞をつける
l- (layout), p- (project), c- (component), u- (utility)
Layout
サイトの大枠となるレイアウトを管理する( header , footer , main , sidebar 等)
Layoutにする基準
「複数のページ（もしくは全ページ）に共通して現れる大きい要素かどうか」
指定するスタイル
位置やレイアウトの指定、共通の余白、色など
display , position , width , height , margin , padding , background
Component
「独立したモジュール」として定義する
繰り返し使われるパーツを最小単位で管理する(ボタンやフォーム等)
→ この最小単位が人によって異なる可能性があるので以下のルールに従うことにする
Componentにする基準
- 「複数のページで使われている共通のモジュールかどうか」
- 「スタイルが同じ」ではなく「スタイルもモジュールとしての役割も同じかどうか」
- 同じモジュールが3回以上出てくる
固有の幅や色などの特色を持つことは避けるのが望ましい
- Componentは出来る限り最低限の機能を持ったものとして定義されるべき
- 幅や色はProjectで指定する
- デザインの段階で幅や高さが決まっている前提の場合は
widthとheightを持たせても良いが、min-widthやmin-heightにしておくとより良い
禁止事項
-
marginの指定 - 特定のタグやクラスの中で使わないと同じ振る舞いができない状態
- Componentの中にProjectやComponentが存在する
Project
Componentのパーツと、それ以外の要素が組み合わさってできる要素(コンテンツを構成する要素)を管理する
Projectにする基準
- 「小さい単位のComponentを集めて、一つのオブジェクトとして扱いたいかどうか」
- 使い回さないブロックだけど分けて管理したい場合
迷ったらとりあえずProject
ComponentかProjectか迷ったらとりあえずProjectにする
具体的なデザインはProjectで指定する
ProjectがComponentのスタイルを上書きするのは許容する
禁止事項
Project内に別のProjectが存在する
Utility
わずかなスタイルの調整のための便利クラスなどを定義する
基本的に使わない