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

## CSSとは
**C**ascading **S**tyle **S**heetsの略で、
ウェブページのスタイルを指定するためのマークアップ言語のこと。
HTMLなどで書かれた文書を色やフォントやレイアウトなどを変えることが可能。
[CSSリファレンス | MDN](https://developer.mozilla.org/ja/docs/Web/CSS)

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

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

```html:HTML(書き方)
<div class="レイアウト・コンテナ要素">
  <div class="レイアウト・コンテナ要素__パーツ要素--状態"></div>
</div>
```

```html: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:HTML(書き方)
<div class="構造(レイアウト要素)">
  <div class="構造(パーツ要素) 状態(見た目)"></div>
</div>
```

```html: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:HTML(書き方)
<div class="レイアウト要素">
  <div class="パーツ要素 状態 見た目"></div>
</div>
```

```html:HTML(例)
<div class="l-main">
  <div class="card">
    <h3 class="title">タイトル</h3>
    <a href="" class="link theme-blue">リンク</a>
  </div>
</div>
```

## 例 ( コード比較 )
### BEM設計
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="abveNmy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_BEM-ex">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abveNmy">
  CSS_BEM-ex</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### OOCSS設計
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="BaoXLOq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_OOCSS-ex">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/BaoXLOq">
  CSS_OOCSS-ex</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### SMACSS設計
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="eYpqdXJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_SMACSS-ex">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/eYpqdXJ">
  CSS_SMACSS-ex</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

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