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

CSSとは

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

命名規則とは

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

CSS命名規則

BEM設計 ( ベム )

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

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

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

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

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

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

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

SMACSS設計 ( スマックス )

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

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

<divclass="l-main"><divclass="card"><h3class="title">タイトル</h3><ahref=""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つは、いずれもメリット・デメリットがあり、チームメンバーとの話し合いで決めましょう。
下記に大きく分けたメリット・デメリットを表に記しておきます。

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