基本的な考え方
セレクタは必ず class で指定し、 id は使わない。また、class名は必ず小文字でケバブケース【"-"（ハイフン）による連結】とする。不可逆な省略は行わないこと。
/* 非推奨 */
.mi {...}
.main_image {...}
/* 推奨 */
.main-image {...}
CSS はメンテナンス性と再利用性を考慮すること。各ブロックのモジュール化を意識し、HTML の記述と合わせて、あるブロックを他のページにそのまま移動したり、同一ブロック内で要素が多少変更されたとしても（ul 要素 → ol 要素や段落の追加など）、レイアウトや見た目が変化しないように考慮し、モジュールの使い回しを容易にすること。
セレクタによる詳細度を極力高くしないように心がけ、単一セレクタによる記述を基本とする。また、要素セレクタの使用はなるべく避け、HTML 側の変更によって CSS の変更まで行わなければならなくなる事態を極力避けるよう配慮すること。
以上の理由より、CSS コーディングには BEM（Block Element Modifier） 規則を採用する。
/* 非推奨 */
.block-header ul.block-main-nav li a {...}
/* 推奨 */
.header__navi__link {...}
ベンダプレフィックスは、コーディング時に最新となる各ブラウザのバージョンから、2 世代前を基準に、有無を判断する。また、仮にサポートするブラウザが存在しない場合でも、必ず標準仕様に基づいた記述も併記すること。
記述は以下を基準とする。
-webkit-*****: #####;
-moz-*****: #####;
-ms-*****: #####;
-o-*****: #####;
*****: #####;
フォーマット
- CSSは宣言ブロック部分に必ずインデントを入れること。
- セレクタと "{" の間には半角スペースを1つ入れる。さらに、プロパティと ":" は続けて記述し、その後ろに半角スペースを1つ入れた上で、値を記述する。
- すべての宣言ブロック末尾には ";" を付与すること。
- 規則集合ごとに1行改行を入れて記述する。
- 複数のセレクタをカンマ区切りで記述する場合は、セレクタごとに改行する。
- プリプロセッサやビルドツールによる最終納品物からの改行やインデント等の自動削除は問題ない。
/* 非推奨 */
.example {
color:red;
margin:0
}
.sample{color:red;margin:0}
/* 推奨 */
.example {
color: red;
}
.sample {
...
}
/* 非推奨 */
h1,h2,h3 {
font-weight: normal;
line-height: 1.2;
}
/* 推奨 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
バリデーション
W3C CSS 検証サービスによるバリデーションを行うこと。特にスペルミスや記述ミスは確実にチェックし、排除すること。プリプロセッサやビルドツールを用いたバリデーションでも構わない。
