# CSSクラス命名のポイント

## 大事なこと

- **役割を明確にする**
- **上書きによる事故を未然に防ぐ**

### 役割を明確にする

**1年後の自分が見てもわかるように心がけましょう**。

「ビジュアルの裏」にある**機能**の名前をつけると良いです。

/* 良くない例: なぜ「赤」にするのか理由が明確でない */
.red-text {
    color: red;
}

/* 良い例: 「警告のメッセージだから赤」という明確な理由と機能がわかる */
.warning-text {
    color: red;
}

:::info
デザイナーからカンプを受け取ったとき、その装飾が何を表しているのかデザイナーにきちんとヒアリングしましょう。デザイナーが考える**機能**つまりそのデザインの**理由**が明確になっていれば、CSSはもちろんHTMLやJavaScriptの実装もスムーズに進めることができるでしょう。
:::

### 上書きによる事故を未然に防ぐ

とある日、以下のコードを書きました。
これはサイトのヘッダに掲載するロゴでした。

.logo {
    width: 200px;
    height: 50px;
    background: url("path/to/logo.svg");
}

数カ月後...別の場所、フッターにロゴを追加しなければならなくなったので、以下を書き足しました。
そのロゴは、別バージョンのロゴで、異なるサイズ・異なる画像ファイルを設定しました。

.logo {
    width: 150px;
    height: 150px;
    background: url("path/to/footer-logo.svg");
}

すると、もともとヘッダにあったロゴに影響が出てしまいました。 **クラスが被っていて、最後に書かれたセレクタに上書きされてしまったからです。**

***

さて、 `.logo` くらいであれば、ヘッダなどのわかりやすい場所にあるのでコーディングの確認作業の中で**気がつくことができるでしょう**。しかし、数十ページ・数百ページにわたるようなサイトを作成している場合、別のページへの影響に気づくのは難しくなります。

**クラスが被っていないかどうか、安全に管理する必要があります**。

## クラスを管理する方法

- クラスの命名規則を作り、それに従う
- クラスが被らない機能を利用する

### クラスの命名規則を作り、それに従う

**上書き事故の例**でいうと、例えば以下のようなルールを作ることである程度防ぐことができます。

- パーツの名前にルールをつける
- その名前をクラスにする
- ヘッダは `.header` にする
- フッタは `.footer` にする
- パーツの子・子孫要素のクラスにルールをつける
- `.基本名__要素名` という命名ルールにする

.header__logo {
    width: 200px;
    height: 50px;
    background: url("path/to/logo.svg");
}

.footer__logo {
    width: 150px;
    height: 150px;
    background: url("path/to/footer-logo.svg");
}

所属するパーツが異なるので、ルールに従えば**クラスが被ることはありません**。

:::warning
上の方法はあくまで例です。（次に紹介する**BEM**を簡単にしたものです）
:::

このような**クラスが被ること**を回避することを念頭に、どのようなルールが良いのか様々な方法が提唱されてきました。

- [OOCSS](https://github.com/stubbornella/oocss/wiki)
- [SMACSS](http://smacss.com/ja)
- [BEM](http://bem.info/)
- [MCSS](http://operatino.github.io/MCSS/ja/)
- [FLOCSS](https://github.com/hiloki/flocss/blob/master/README.md)

SASSなどの技術に依存する設計になっている命名規則が多いですが、まったく完全にそれに従うというより、それぞれの良いエッセンスを持ち寄って、そのプロジェクトに向いた命名規則を作ると良いです。

:::info
ちなみにD-ZEROではBEMをベースに参考程度にFLOCSS、メインコンテンツにはOOCSSを適用する、というようなルールで運用しています。
:::

### クラスが被らない機能を利用する

**Scoped CSS、またはそれに近い機能を果たすライブラリやツールを利用することで、クラスの被りを回避できます**。

- Web ComponentsのScoped CSSの機能を利用する
- Vue.jsの**scoped style**を利用する
- Reactで**Styled Components**や**Emotion**などのCSS in JSを利用する

:::danger
これはHTMLやCSS、JavaScriptを生で書くようなプロジェクトでは適用できません。利用にはある程度高度なフロントエンドの知識を有するので、おいおい学んでいくと良いでしょう。
:::

## 付録

### パーツの名前参考例

パーツ名|クラス名
---|---
メインコンテンツ|`.main`
サブコンテンツ|`.sub`
ヘッダ|`.header`
フッタ|`.footer`
ナビゲーションやメニュー|`.nav`
グローバルナビゲーション|`.nav-global`
ローカルナビゲーション|`.nav-local`
ヒーロー画像（メインビジュアル）|`.hero`
パンくず|`.breadcrumb`
特集メニュー|`.features`
記事一覧|`.articles`
スライドショー|`.slideshow`
タブメニュー|`.tab`
ページ上部へ戻るボタン|`.btn-back-to-top`

### 表記ゆれを防ぐための参考

#### 省略の表記ゆれ

:::info
省略は基本的よくありません。最初に述べたとおり**明確さ**が大事だからです。

しかし慣例的に省略語があるもの、あまりにも長い名前についてはルールを決めて省略するとよいでしょう。
:::

| 省略語 | 元の単語 | 省略の参考にしているもの |
| --------------- | -------------------- | ------------------------ |
| a11y | accessibility | 一般略語 |
| app | application | 一般略語 |
| btn | button | twitter bootstrap |
| bg | background | 一般略語 |
| ctrl | control | キーボード |
| fn | function | キーボード |
| i18n | internationalization | 一般略語 |
| img | image | HTML タグ |
| ja（他 言語名） | Japanese | 国際基準 |
| jp（他 国名） | Japan | 国際基準 |
| nav | navigation | HTML タグ |
| photo | photograph | 一般略語 |
| pict | pictrue | 拡張子 |
| prev | previous | 一般略語 |
| pw | password | Linux |
| sp | smartphone | 頭字語 |
| src | source | HTML 属性 |
| temp | temporary | Linux |
| tmpl | template | jQuery プラグイン |
| thumb | thumbnail | 拡張子 |
| util | utility | 一般略語 |
| xs | extra small | twitter bootstrap |
| sm | small | twitter bootstrap |
| md | middle | twitter bootstrap |
| lg | large | twitter bootstrap |
| xl | extra large | twitter bootstrap |
| obj | object | 一般略語 |

## 識別子の表記ゆれ

:::info
類義語や和製英語の影響、誤認により、同じ意味を表す識別子が氾濫するので、統一できるものは統一しておくとよいです。
:::

| 意味 |使用する識別子 | 使用しない識別子 |
| ---------------------------------- | ----------------- | --------------------------------- |
| トップページ | home | top |
| ページネーション（パジネーション） | pagination | pager |
| パンくずリスト | breadcrumb | pan |
| スライドショー | slideshow | gallery carousel |
| メインビジュアル | hero | mv mainvisual jumbotron billboard |
| 見出し | heading | headline |
| (ページネーションの)前 | prev | back |
| モーダルウィンドウ | modal | popup |