# CSSクラス命名のポイント ## 大事なこと - **役割を明確にする** - **上書きによる事故を未然に防ぐ** ### 役割を明確にする **1年後の自分が見てもわかるように心がけましょう**。 「ビジュアルの裏」にある**機能**の名前をつけると良いです。 ```css /* 良くない例: なぜ「赤」にするのか理由が明確でない */ .red-text { color: red; } /* 良い例: 「警告のメッセージだから赤」という明確な理由と機能がわかる */ .warning-text { color: red; } ``` :::info デザイナーからカンプを受け取ったとき、その装飾が何を表しているのかデザイナーにきちんとヒアリングしましょう。デザイナーが考える**機能**つまりそのデザインの**理由**が明確になっていれば、CSSはもちろんHTMLやJavaScriptの実装もスムーズに進めることができるでしょう。 ::: ### 上書きによる事故を未然に防ぐ とある日、以下のコードを書きました。 これはサイトのヘッダに掲載するロゴでした。 ```css .logo { width: 200px; height: 50px; background: url("path/to/logo.svg"); } ``` 数カ月後...別の場所、フッターにロゴを追加しなければならなくなったので、以下を書き足しました。 そのロゴは、別バージョンのロゴで、異なるサイズ・異なる画像ファイルを設定しました。 ```css .logo { width: 150px; height: 150px; background: url("path/to/footer-logo.svg"); } ``` すると、もともとヘッダにあったロゴに影響が出てしまいました。 **クラスが被っていて、最後に書かれたセレクタに上書きされてしまったからです。** *** さて、 `.logo` くらいであれば、ヘッダなどのわかりやすい場所にあるのでコーディングの確認作業の中で**気がつくことができるでしょう**。しかし、数十ページ・数百ページにわたるようなサイトを作成している場合、別のページへの影響に気づくのは難しくなります。 **クラスが被っていないかどうか、安全に管理する必要があります**。 ## クラスを管理する方法 - クラスの命名規則を作り、それに従う - クラスが被らない機能を利用する ### クラスの命名規則を作り、それに従う **上書き事故の例**でいうと、例えば以下のようなルールを作ることである程度防ぐことができます。 - パーツの名前にルールをつける - その名前をクラスにする - ヘッダは `.header` にする - フッタは `.footer` にする - パーツの子・子孫要素のクラスにルールをつける - `.基本名__要素名` という命名ルールにする ```css .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 |