はじめに

皆さんは普段どのような設計手法でCSSを書いていますでしょうか？
設計手法とはHTMLのクラス名の付け方と、CSSのコードの管理方法についての手法のことです。

超簡単にいうと命名規則というやつです。

CSSの設計手法を取り入れることによって、メンテナンス性や作業効率を向上させることが出来ます。

３大設計手法

様々な設計手法が誕生し採用されています。
今回は、有名どころの３つを簡単にまとめてみました。

設計手法	コード量	ファイル数	他要素への影響範囲	再利用性
BEM	増える	普通	小さい	低い
OOCSS	減る	普通	大きい	高い
SMACSS	減る	増える	大きい	高い

それぞれの特徴

では、どんな設計手法なのかをまとめていきたいと思います。

BEM

いきなりCSS設計手法の王道である BEM（ベム）さんの登場です。

最も好き嫌いが別れる設計手法であり、最も有名な設計手法ではないでしょうか。
他社のサイトをブラウザの開発者モードで覗くムッツリスケベの皆さんなら、よく見る命名かもしれません。

BEM という名前は Block、Element、Modifier の３つの要素を示しています。

この設計手法は命名規則が大きな特徴となります。

3大設計手法の中で、最も細かくクラス名を指定する設計手法です。
よって、スタイルの使い回しが少なく、修正時の影響範囲が小さいため、メンテナンスコストを下げることが出来ます。

ただし、これによってクラス名やファイルの記述量が長くなってしまうというデメリットもあります。

命名規則

BEMはクラスの所属関係を明確に宣言します。
前述した Block、Element、Modifier の3つの要素をシングルクラスで表現します。

１つの要素に対して、複数のクラスを指定するのをマルチクラス、１つないし２つ程度のクラスを指定するのをシングルクラスと呼びます。

Block
mainなどの、大きなレイアウトの部分です。

Element
Blockの中に構成される listや buttonなどの要素のことです。

Modifier
エラーメッセージのスタイルや、未入力時のスタイルなどといった状態を表すものです。

BEMにおけるクラス名は
BlockとElementは アンダースコア2つ
ElementとModifierは アンダースコア1つ
で構成されます。

しかし MindBEMdingというBEMから派生した考え方では、
BlockとElementは アンダースコア2つ
ElementとModifierは ハイフン2つ
で構成されます

一般的には MindBEMdingの方が多く採用されています。

index.html

<!-- block__element--modifier の規則で書く --><!-- mainで使われるボタン --><divclass="main__button"><!-- headerで使われるボタン（通常時） --><divclass="header__button"><!-- headerで使われるボタン（エラー時） --><divclass="header__button--error">

このように、BEMはクラス名を見るだけで、その要素の所属情報が一目で分かるので、個人的には結構好きです。

OOCSS

OOCSS（オーオーシーエスエス）は、「Object Oriented CSS（オブジェクト指向CSS）」の略語で、Yahoo!の開発者であるNicole Sullivanによって提唱されたCSSの設計手法です。

簡単に言うと、再利用可能なクラス名を作って不必要なコードを減らそうってことです。

よくあるCSSのアンチパターンですが、共通のスタイルなのに各要素に追加したことで、改修時に苦労した経験のある方は多いのではないでしょうか。

その問題を解決するように設計されたのが OOCSS です。

命名規則

再利用可能なスタイルはひとつのクラスにまとめるのがモットーです。

index.html

<!-- サイズの異なるカードを表示したい場合 --><!-- アンチパターン --><divclass="card_small"><divclass="card_medium"><divclass="card_large"><!-- OOCSS --><divclass="card small"><divclass="card medium"><divclass="card large">