クラス名のルール・命名規則・考え方などのまとめ

クラス名はある程度ルール化する

この場合はこのクラス名にする...のようにある程度ルール化することで、コーディング速度が上がるしミスも減ります。

私のルールをいくつか紹介します。

要素や条件	クラス名
サイト全体	wrapper
ヘッダー・フッターを除くメインエリア	main
2カラム、3カラムなどの親要素	grid, grid-◯◯
リスト系（<ul>, <ol>が多め）	list, ◯◯-list
リスト直下の子要素（<li>が多め）	item, ◯◯-item
リスト系じゃないけど、連続する塊が続くとき	row, ◯◯-row
テキスト情報をまとめた親要素（ブログ記事のカテゴリ, 日時, タイトルなどの親）	info, meta, content
とりあえず要素をまとめたい時	block, group, parent
記事詳細ページなどで、ヘッダー部分（タイトル, カテゴリなど）やメイン部分（本文）などが明確に分かれている場合	header-◯◯, body-◯◯, footer-◯◯
見出しやタイトルなど	title, heading, label
画像系	img, photo, thumb
大きさなどのバージョン違いがある場合（BEM記法のmodifire）	--full, --short
エラー系	error-◯◯, non-◯◯

その他、以下も意識しています。

• 複数形の「s」は使わない
  • 例：カードをまとめた親要素はcardsではなく、parent-cardやgrid-cardなど
  • 理由：語尾のsを見落とす可能性があるから（sの付け忘れなど）
• 難しい英単語は使わない
• 単語の区切りはハイフン
  • 4単語以上にはしない
    • 例：aaa-bbb-ccc-dddは長過ぎるのでNG

jsでスタイルが変わる系

基本的にはdata属性でスタイルを変えます。

このようにdata属性で管理することで、CSSを見た時にdata-◯◯の記述があればひと目で「この要素はjsでなにかしてるんだな！」と分かるようになります。

.text[data-show="true"] {
  display: block;
}

.text[data-show="false"] {
  display: none;
}

もし何らかの理由でdata属性が使えない...みたいな時は、以下のように.is-◯◯クラスで管理します。data属性と同じ理由で、「.is-◯◯ = jsでなにかしてる」とひと目で理解できるようになります。

.text {
  display: none;
}

.text.is-show {
  display: block;
}

z-indexの管理方法

「ページ全体に影響を与える要素」と「セクション間でしか影響しない要素」は分けてz-indexを定義する

「ページ全体に影響を与える要素」とはヘッダーやフッター、モーダルなど様々な要素に対して上下関係が発生する要素です。

 

それに対して「セクション間でしか影響しない要素」とは各セクション内やパーツ内で上下関係が発生する要素です。地味に伝わりにくいので例を2つ用意しました。

以下はファーストビュー内でのみで上下関係が完結しており、背景画像が後ろ、文字が前という上下関係です。

 

以下はWORKセクション内でのみで上下関係が完結しており、本文部分が前、+01のテキストが後ろという上下関係です。

 

このように、「ページ全体に影響を与える要素」と「セクション間でしか影響しない要素」でz-indexの書き方を分けます。

「ページ全体に影響を与える要素」のz-indexの書き方

CSSなら一箇所にまとめて、Sassならz-index専用ファイルを作り、そこにz-indexの記述をまとめて書きます。

z-indexの値は10以上にして、基本的には10間隔で定義します（理由は後述）。

こうすることで、その箇所（ファイル）を見れば、ひと目で上下関係を確認できます。以下はCSSの例です。

.header {
  position: absolute;
  top: 0;
  /* などz-index以外のスタイル */
}

.footer {
  color: #fff;
  position: relative;
  /* などz-index以外のスタイル */
}

.modal {
  position: absolute;
  top: 0;
  /* などz-index以外のスタイル */
}

/*
・
・
・
*/

.modal {
  z-index: 100;
}

.header, .footer {
  z-index: 90;
}

「セクション間でしか影響しない要素」のz-indexの書き方

z-indexの値は0~9までにします。私の経験上、セクション間のみで9個以上の値が必要になったことは一度も無いのでこのようなルールにしています。

こちらは「ページ全体に影響を与える要素」のように一箇所にz-indexを書くのではなく、各パーツのスタイルの中にz-indexも同時に書いてあげます。以下はCSSの例です。

.parent {
  position: relative;
}

.text {
  color: #000;
  font-size: 10px;
  position: absolute;
  z-index: 1;
}

.img {
  width: 100px;
  height: 200px;
  position: absolute;
  z-index: 0;
}

「セクション間でしか影響しない要素」も「ページ全体に影響を与える要素」と同じように一箇所にまとめてz-indexを書こうとすると、その箇所のz-indexが大量になってしまい、可読性が悪くなってしまうのでこのようにしています。

ブレイクポイント

クラス名とは話がズレますが大事なことなので書きました。

ブレイクポイントの値は変数で管理します。こうすることで、ブレイクポイントの値が変わった時に変数の値を変えるだけで全体の値を変えることができます。

もし変数管理していなかったら、ファイル全体を修正しなければいけません。

以下はSassの変数の例です（CSS変数でも同じことができます）。

$breackpoint_sm: 680px
$breackpoint_md: 768px
$breackpoint_lg: 1024px
$breackpoint_xl: 1280px

@media screen and (min-width: $breackpoint_sm) {
  // style
}

ブレイクポイントの値はTailwind CSSを参考にしています。このように有名所のフレームワークを参考にすればまず問題ないでしょう。