BEM vs OOCSS vs SMACSS 【CSS命名規則比較】

CSSとは

Cascading Style Sheetsの略で、
ウェブページのスタイルを指定するためのマークアップ言語のこと。
HTMLなどで書かれた文書を色やフォントやレイアウトなどを変えることが可能。
CSSリファレンス | MDN

命名規則とは

プログラミングで、変数、型、関数などに名前を付ける際のルールや慣習のこと。
命名規則を設けることで、見やすいコードにしたり、チームで開発している場合には、
コードの統一感を出すことができ、総じて改修のしやすいコードを書くことができます。

CSS命名規則

BEM設計 ( ベム )

「Block Element Modifier」の略で、
クラス名をレイアウト・コンテナ要素(Block)・パーツ要素(Element)・状態(Modifier)の組み合わせ
によって記述するCSS設計方式。

HTML(書き方)

<div class="レイアウト・コンテナ要素">
  <div class="レイアウト・コンテナ要素__パーツ要素--状態"></div>
</div>

HTML(例)

<div class="card">
  <h3 class="card__title">タイトル</h3>
  <a href="" class="card__link card__link--blue">リンク</a>
</div>

OOCSS設計 ( オーオーシーエスエス・オブジェクト指向CSS )

「Object Oriented CSS」の略で、
クラス名を構造・状態(見た目)の大きく2種類に分けた組み合わせによって記述するCSS設計方式。

HTML(書き方)

<div class="構造(レイアウト要素)">
  <div class="構造(パーツ要素) 状態(見た目)"></div>
</div>

HTML(例)

<div class="main">
  <div class="card">
    <h3 class="title">タイトル</h3>
    <a href="" class="link bg-blue">リンク</a>
  </div>
</div>

SMACSS設計 ( スマックス )

「Scalable and Modular Architecture for CSS」の略で、
クラス名をベース要素(リセット)・レイアウト要素・パーツ要素・状態・見た目の5つの組み合わせ
によって記述するCSS設計方式。

HTML(書き方)

<div class="レイアウト要素">
  <div class="パーツ要素 状態 見た目"></div>
</div>

HTML(例)

<div class="l-main">
  <div class="card">
    <h3 class="title">タイトル</h3>
    <a href="" class="link theme-blue">リンク</a>
  </div>
</div>

例 ( コード比較 )

BEM設計

See the Pen CSS_BEM-ex by engineerhikaru (@engineerhikaru) on CodePen.

OOCSS設計

See the Pen CSS_OOCSS-ex by engineerhikaru (@engineerhikaru) on CodePen.

SMACSS設計

See the Pen CSS_SMACSS-ex by engineerhikaru (@engineerhikaru) on CodePen.

まとめ ( メリット・デメリット )

これら3つは、いずれもメリット・デメリットがあり、チームメンバーとの話し合いで決めましょう。
下記に大きく分けたメリット・デメリットを表に記しておきます。

	メリット	デメリット
BEM	CSSの構造がシンプルになる・Sassとの相性が良い	クラス名が長くなる・総コード量が多くなる
OOCSS	クラス名が短い・ネーミングが楽	CSSが複雑になる・例外に弱い
SMACSS	ユーザ体験が一貫する・メンテナンス性が高い	規則を知らないと意味不明・例外に弱い

個人的には、OOCSSをよく使うかな...
SMACSSについては、書き方がかなり独特なので、また機会があれば紹介します(^^)