HTMLとCSSのクラス名(命名規則と例)

HTMLとCSSのクラス名はすべて小文字にして、単語と単語はハイフンで区切る。アンダースコア(アンダーライン)は使わない。またHTMLのタグと同名にしない。

  1. 小文字
  2. ハイフンでつなぐ
  3. HTMLタグは禁止

例:
◯ login-header
◯ product-wrapper-content
△ home-img
△ press-p
△ section-table
× table
× a

以下は会社や環境によって必ずしもルールとはいえない。

子要素を持たない要素に class をふらない

document というクラス名の div 要素に p タグの子要素があるとき、この p タグにクラスはふらない。

.document p

とする。ただし子要素間で違うデザインにしたいときは

.document-date
.document-title
.document-article

などと子要素に直接クラス名をふる。

header, content, footer でページ全体を区切らない

ページは menu, global, nav, bottom などで分けて、header, content, footer は使わない。これらの単語は

login-header
home-content
page-footer

などと大きいクラスの子要素として用いる。ページ上部をサイト・ナビゲーションにしている場合は特に header でないクラス名にする。

container と wrapper

デザインを中央に揃えたいときなど、その部分をラッパーで包むことは多い。ラッパーのクラス名として container と wrapper がよく使われる。container は、それに直接含まれる要素(子要素)が複数あるときに使う。子要素が一つの場合は wrapper を用いる。

子要素複数 ... container
子要素一つ ... wrapper

親要素が body のときを除いて、子要素を一つしか持たない下のような構造は避けるべきである。

親 home
子 home-content
孫 home-main
ひ孫 home-header, home-content

これは次のように書き換える。

親 home
子 home-wrapper
孫 home-container
ひ孫 home-header, home-content

省略形を使わない

btn などの略語を使わない。このくらいの略語はわかるだろう…という判断は、多くの人にコードが流れていくにつれて余計な時間ロスを生む。

よく使われるクラス名

クラス名はそのページに性質に合わせる。ログイン画面であれば login など。

wrapper
global
main
home
login
sign
title
summary
section
sibling
sidebar

子要素の命名規則

親要素のクラス名に子要素独自の名前をつなげる。

home
home-container
home-header, home-content
home-header-title

広告

広告

広告

姓名判断

漢字辞典

色辞典

数の辞典

高校化学専門サイト

Python解説サイト

© Irohabook