FLOCSSはFoundation/Layout/Objectに分割し、更にObjectをComponents/Projectに分割しています。
Objectの分割について判断が分かれるようですが、私の理解では以下の通りです。
- Componentは独立して存在できる単位
- Componentを複数Componentによって構成してはいけない
- 複数Componentで構成するものはProject
このObjectの分割に似た設計でBEM(Block/Element/Modifier)があります。
- Block: 独立して存在できる単位
- Element: Blockの構成要素で独立して存在できない
- Modifiler: 装飾
これらを比べると以下の違いがあることがわかります。
FLOCSS
- 独立して存在できないものを定義する概念はない
- 独立して存在するComponentとそれをまとめるProjectを区別している
BEM
- 独立して存在できないものを定義するElementがある
- 独立して存在できるBlockは複数Blockで構成することも可能でそれもBlock
個人的には以下の理由でFLOCSSのObjectの分割よりもBEMの方が良いと感じました。
- 独立しては存在できないが、他の要素で共通する部分をElementとして表現可能
- ElementがBlockになるよりもComponentがProjectになる事の方が多そうなため、BEMの方が変更に強い