BEM

Block,Element,Modifier（モディファイア）で構成される命名規則です。
class名は冗長になるので記述スピードは遅くなりますが、コードがより明確でメンテナンスに優れたものになります。
※今回導入する命名規則はBEMなどを取り入れたFLOCSSも参考にしています

・MindBEMding
BEMの概要やソース例など実際の使い方がわかりやすいです。

・BEMとは何か？
図を使ってBlock,Element,Modifierがわかりやすく説明されています。HTML/CSS言語以外についても言及されています。

Modifierの命名の派生パターン

SMACSSのStateパターンの命名を拝借し、'is-*'プレフィックスを付与し、.is-activeというようにすることもできます。
CSSはclass同士をスペース無しで記述する方法で対応します。

このアイデアを採用する場合の原則として、.is-activeそのものにルールを持たせるのは禁止します。これは.is-activeそのものが持つルールが、 他のモジュールのModifierのスタイルを汚染してしまうのを防ぐためです。

名前の付け方のヒント

1.ブロック名を決める(例：news-list)
2.ブロック内のパーツ名を決めて「__」でつなぐ（例：news-list__img）
3.そのパーツに別のバリエーションや状態があれば「is-」プレフィックスをつけて対応する
（HTML例：class="news-list__img is-reverse" CSS側:.news-list__img.is-reverse ｛...｝）

プレフィックス

• .c-
  コンポーネント
  ボタンやタイトルなど再利用できる最小限のパーツ。幅などの固定数値はなるべく設定しないのが好ましい
• .u-
  ユーティリティ
  .mbs｛margin-bottom: 15px;｝のような独立した役割をもつもの。わずかなスタイル調整のための便利なクラス
• .is-
  Modifierを表すクラス。※参照：Modifierの命名の派生パターン(推奨)
• .js-
  JSに関わるクラス名。JSを実装する際は別途、このプレフィックスをつけたクラス名をつけCSSとJSの分離を明確にします。このクラスにCSSの装飾はしないこと

これらを付けることで、各classの役割が明文化される。さらに、命名に独自性があるので全置換などが行いやすい。
短所はBEMの命名規則がさらに冗長になってしまう。

IDはなるべく使わず、classを使用する

IDはCSSの優先度が高く、打ち消しが効きにくいので使わないようにします。
ページ内リンクを貼る時はIDでOKです。

IDとクラスの命名

IDとクラス名にはちゃんと意味の分かる名前を使うこと。
見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前を付ける。

単語は基本的に省略しませんが、省略しても意味の分かる単語は積極的に省略してよい。
image → img
text → txt
title → ttl
button → btn
banner → bnr
header → hd
footer → ft
column → col　など・・・

・よくつかわれそうな単語辞典

命名は小文字で

命名は小文字で、キャメルケース（単語頭文字を大文字にする）は使わないようにします。
例：SampleText → sample-text

HTMLのコメント

ソースコードが長く、閉じタグがわかりにくい場合、以下のように閉じタグにコメントを付けます。
classの閉じの場合は「/.」、idの場合は「/#」です

フレームワークのコメント

フレームワークの記述方法では以下のようにコメントを付けることも出来ます。
ソースには出力されないので、見られたくないコメント（作業者間での説明など）を付ける際に便利です。
コンテンツの目印に使う場合は「▼」は大コンテンツ、「▽」は小コンテンツとして使い分けています。

CSSのコメント

大コメントで区切る場合には上に空行を５つ入れておきます。
この空行の固まりによって、巨大なファイルを素早くスクロールしていても、すぐにセクションの切れ目に気がつくことができます。