CSS設計手法まとめ（OOCSS・BEM・SMACSS・SuitCSS・FLOCSS）

CSSを部分部分で書いていると、再利用性のないクラスばかりになったり、重複したスタイルを複数書くことになったりします。また、CSSでは詳細度によってどのセレクタが優先されるか決定されるので、理解していないと意図した通りにスタイルが反映されなかったり、強制的に反映しようとして!importantを付けて!importantだらけになったりします。
このようにCSSが肥大化していく問題を解決するため、CSS設計手法について調べてみました。

＊参考

＊OOCSS とは

Object Oriented CSS の略で、CSSにオブジェクト指向の考えを応用した設計の考え方です。Bootstrap、Twitter、GitHubなどで使われています。
Webページをひとつひとつパーツに分けてスタイルを定義して組み合わせていく考え方で、構造と見た目を分離することで少ないコードでより多くの見た目を定義することができます。
（構造はwidth, border, padding, marginといった形を決めるもの、見た目はcolorなどを指します。）

＊BEM

Block Element Modifier の略で、CSSの命名概念のことです。
コンポーネントを Block、Element、Modifier の3つに分けて命名規則を元にblock__element–modifierといったクラス名を定義します。
分かりやすくはなりますが、クラス名が長くなるといったデメリットもあります。
クラス名のアンダースコア2つは必須ではないですが、BEMだということをわかりやすくするために2つにすることが推奨されています。

Block
ナビゲーションやヘッダー、フッターといったパーツのまとまりを指します。Blockは入れ子にするのが禁止されていて、独立して使います。
Element
タイトルや本文といった、Blockの中のひとつひとつのパーツを指します。
Modifier
BlockまたはElementの色や大きさを変更する場合に使います。
list_type_discやtubmenu__item_state_currentといったクラス名を定義します。

＊SMACSS

Scalable and Modular Architecture for CSS の略で、スマックスと読みます。OOCSS と BEM を汲んだコーディングルールです。下記のルールによって構成されています。

Base（ベースルール）
デフォルトのスタイル設定のことです。サイト全体のフォントサイズなどタグに直接設定するスタイルを指定します。
Layout（レイアウトルール）
ナビゲーションやサイドバーなどの大枠のレイアウトを指定します。クラス指定で接頭語を付与します。（.l-mainなど）
Module（モジュールルール）
ボタンやタブなど再利用可能なパーツのレイアウトを指定します。親モジュール名を接頭語として付与します。（.box-titleなど）
State（ステートルール）
javaScriptで操作されるクラスを指定します。非活性（.is-disable）や選択時（.is-active）に上書きされるようなクラスです。
Theme（テーマルール）
全体のルールを変更するときに使います。使う機会は少ないです。

＊SuitCSS

BEMの派生型で、SMACSSのStateも取り入れたCSS設計手法です。

＊FLOCSS

OOCSS、SMACSS、BEM、SuitCSS、MCSS などの考えを取り入れたものです。CSS設計のいいとこ取りをした手法です。BEMベースで命名規則が決まっており、Block - Element だと.button__text、Block - Modifier だと.button--primaryのようにクラスを定義します。下記構成でディレクトリを分け、CSSファイルを格納します。

Foundation
サイト全体のフォントサイズなどデフォルトのスタイルを定義します。
Layout
ナビゲーションやサイドバーなどのサイトで共通した大枠のレイアウトを指定します。
Object
- Component
  再利用可能な小さな単位のモジュールを定義します。（.c-buttonなど）
- Project
  固有のスタイルでComponentと他の要素によって構成されます。（.p-articleなど）
- Utility
  わずかなスタイルの調整のためのクラスを定義します。（.u-blockなど）

＊所感

様々な手法がありますが、要素ごとの細かいパーツにしてそれを組み合わせていくといった方向性は共通していそうでした。設計手法や命名規則を統一すると追加や修正が格段と楽になりそうなので、Webアプリケーションを作成する時点でCSS設計は考慮しておいたほうが良さそうです。
今後はこれらのCSS設計手法を意識して取り組みたいと思います。

もぐもぐプログラミング