FLOCSS vs ECSS

FLOCSS・ECSSを使って、それぞれ1万行ぐらいCSSを書きました。正反対とも言えるこれら2つについて、それぞれメリット・デメリットがあり、得意な場面と不得意な場面があると感じました。実際にどういう場面でメリット・デメリットを感じたか、という点をベースに両者を使った感想をまとめます。

具体的に経験したシチュエーション

私の実体験に基づいて、どういった場合にFLOCSS、ECSSでの差が出てくるのかを紹介します。

共通な部分について、一度書いたスタイルを後から変更する場合

これは明らかにFLOCSSの方が適しています。共通化されているのでスタイルを変更するのは1箇所でOKです。一方ECSSの場合、似通っている場所がある場合は全てを変更しなければいけません。具体的には、ページの見出しのスタイルを変更しようとした場合、FLOCSSの場合は見出し共通のスタイルを変更すれば大丈夫です。ですが、ECSSの場合はそれぞれのNameSpaceの中に存在している見出しのスタイルを変更しないといけません。

同一ページについて、2つ以上のパターンを比較する場合

この場合は、どちらかというとECSSが適していると言えます。ECSSであれば新しくnamespaceを作成すればよく、不要になったらディレクトリごと破棄しても構いません。FLOCSSではBEMのBlockもしくはModifierを利用することになるか、他の方法を考えるか、という感じになると思いますが、どちらにしても既存のスタイルとの分離を考える場合、FLOCSSのルールでは少しやりづらいです。あと、わずかな差ではありますがnamespaceは先頭でmodifierは末尾なので、ECSSの方がクラス名からどちらのパターンなのか判断しやすいです。

FLOCSSを選ぶ時、ECSSを選ぶ時

私が新しくスタイルを書く場合、デザインによってどちらを採用するか判断します。

デザインの性質で判断する

大まかに言って、スタイルに影響する要素が少ない場合(ページが変わってもスタイルは変わらない、など)であればFLOCSSが適しています。反対に、スタイルに影響する要素が多い場合(同じ要素でもページによってスタイルが異なる、など))であればECSSが適していると言えます。

具体的に、記事投稿を行うブログのようなサイトを考えてみましょう。ディレクトリは概ね下記の構成になります。FLOCSSでは記事に関連するスタイルが object/project/_articles.scss に全て記述されます。ECSSでは、ページごとに別のファイルになります。

FLOCSS
└─ object
└─ project
├── _articles.scss
└─ _comments.scss
ECSS
─ namespace
├── TopPage
│ ├── Article
│ │ └── _top-articles.scss
│ └── Comments
│ └── _top-comments.scss
├── ArchivePage
│ ├── Article
│ │ └── _archive-articles.scss
│ └── Comments
│ └── _archive-comments.scss
└── ContentPage
├── Article
│ └── _content-articles.scss
└── Comments
└── _content-comments.scss

記事のスタイルを変更するというシチュエーションで、トップページ・アーカイブページのデザインの違いに着目して、どちらを選べばより良いか考えてみます。

トップ・アーカイブページ間で、記事のレイアウトが同じ場合
この場合、ECSSディレクトリのTopPage/Article/_top-articles.scss と ArchivePage/Article/_archive-articles.scss の内容はほぼ同じになります。そのため、記事のスタイルを変更する場合、2ファイル間で同じようなスタイル変更を行う必要があります。

置換によって、ファイルをまたいで同時に変更するとしても、関係のないディレクトリのスタイルは変更しないため、どのファイルが対象なのか、ということを変更の度に確認する必要があり、変更し忘れなどが発生しやすくなります。

一方、FLOCSSでは object/project/_articles.scss に全てがまとまっているため変更ファイルは一つですみます。この場合はFLOCSSを選びましょう。

トップ・アーカイブページ間で、記事のレイアウトが異なる場合
トップページではカード型のレイアウトで記事タイトルと画像のみ、アーカイブページでは、記事タイトル・画像に加えて本文の抜粋や概要もレイアウトに含む、というような場合は、ECSSを選べば良いでしょう。

object/propject/_articles.scss には異なる2つのレイアウトに関するスタイルが1つのファイルに含まれることになります。トップページの記事タイトルのスタイルを変更していたつもりが、アーカイブページのスタイルを変更していた、などが発生する可能性があります。

一方、ECSSではページごとにnamespaceが分かれているため、トップページについては TopPage ディレクトリ、アーカイブページについては ArchivePage ディレクトリのスタイルのみを変更すればよく、誤って別の箇所のスタイルを変更する、ということが発生しません。

デザインとコーディングを並行する場合には、基本的にはECSSを採用しておけば、特定のスタイルが不要になった場合でも削除しやすく、変更の影響範囲を考慮しなくて良いため、スムーズにコーディング出来るでしょう。

参考

Architect CSS and scale CSS with the ECSS CSS methodology
https://github.com/hiloki/flocss