はじめてのCSS「コーディングルール」

はじめてCSSを練習する方向け。

class名やCSSセレクタを記述する時によく使うルールを2つ紹介します。

１．子孫セレクタで場所を限定しながらデザイン

メリット

• class名がシンプル

デメリット

• コーダーによってセレクタのポイント数が変動する
• 書き方によってはHTMLの要素名を変更しづらい
  例）h1からh2に変更、リストからdivに変更

HTML

「グループ名」で大枠を作成し、グループ内に「部品」や「対象要素」を配置します。

<div class="グループ名">
  <div class="部品名">
    <対象要素>サンプル</対象要素>
  </div>
</div>

CSS

子孫セレクタを使用しデザインをグループ内に限定します。

修正や変更をした時に他のグループに影響がでないようにします。

.グループ名 .部品名 対象要素 {
  color: red;
}

２．BEMを使って場所を限定しながらデザイン

BEM（Block Element Modifier）の略

BEMをより詳しく知りたいときは「class名の命名規則BEMのルールとカスタマイズ」を参照

メリット

• 絶対クラス名をつけるので迷いがない
• コーダーによって名称の多少の揺れはあるが命名規則がしっかりしている
• 子孫セレクタを使わないのでポイント数による優先度を考えなくてよい

デメリット

• class名が長い
• ルールを学ぶ学習コストがかかる
• 現場によってBEMをカスタマイズした変則ルールがある
• BEMと他のコーディングルールを併用することが多い

HTML

「Block名」で大枠を作成し、Block内を構成する「部品」に「Block名__element名」と必ず「Block名」をつけてclass名を記述します。

また、どの要素にも必ずclass名を記述します。（classセレクタのみを使ってCSSを記述するため）

<div class="Block名">
  <div class="Block名__element名">
    <div class="Block名__element名">サンプル</div>
  </div>
</div>

CSS

基本的に子孫セレクタを使わない。

基本的にclassセレクタを使い、要素セレクタを使わない

class名に必ず「Block名」が入っているので、修正や変更をした時に他のBlockに影響がでません。

.Block名 {
  color: red;
}

.Block名__element名 {
  color: green;
}