【CSS設計】クラスの命名規則について

クラスの命名をするときに意識していることをまとめてみました。世の中には多くのCSS設計方法やクラス命名規則が溢れていますが、どれを取り入れたら良いのかわからない方は、本記事を通してよりよいクラス命名規則とは何かを理解して今後の参考にしていってください。

クラスの命名規則を統一していないことで発生する問題点

クラス名をなんとなくつけていると以下のような問題に悩まされることになります。クラスの命名に正解はありませんが、優れた命名をすることで効率性も保ちながら変更に強くメンテナンスしやすいCSSを書くことができます。

クラス名を思いつくのに時間がかかり、コーディングが非効率になってしまう。
適当にクラス名をつけてしまい、後から読んだ時にわかりにくくなってしまう。
重複クラスで意図せずに別の要素にもスタイルが当たってしまい、デザインが崩れてしまう。
どの要素に何のクラス名をつけたのかわからなくなってしまい、あとからテキストエディタ等で検索しにくくなってしまう。
ほぼ同じデザインの要素をクラス名を再利用して対応したものの、あとから一方の要素だけデザインを修正することになった結果、修正に時間がかかってしまう。

クラス命名規則にこだわりすぎた結果、起きる弊害

スタイルの再利用のためにクラス命名規則にこだわりすぎるのは、メリットどころかデメリットを増やすことにもなるので注意しましょう。よくあるケースは以下のようなものです。

こだわりのクラス命名規則であらゆる要素のスタイルを再利用しようとしたものの、思いのほかスタイルを再利用できないケースが多く、時間の無駄になってしまう。
抽象度の高い単語でクラス名を構成しすぎてコードがわかりにくくなってしまう。（boxやcontainerやblockなど意味のない用語が多発する）
複数のクラスにスタイルが分散しすぎて、コードが増えるほど自分でクラスを管理できなくなる。
BEMのBlockやElementの粒度がよくわからない、OOCSSのクラスの分け方よくわからないで迷って結局クラスの再利用もコーディングの効率化も中途半端になる。

何のための命名規則か？

コーディングのスピードを上げて効率よくコーディングすることが目的なら、クラスは短い方がよいです。また、コードは再利用できるものはなるべく再利用できた方がよいです。後戻りや修正が発生するコードも好ましくないでしょう。

複数人でコードの品質を一定に保ち、実装者によってコードの内容が変わることを避けるための命名規則なら、クラス名に用いるボキャブラリを統一したほうがよいです。そして、ハイフンや大文字小文字などの使用ルールも統一しておいた方が良いでしょう。

そして、依存関係は少ない方が影響範囲が読めるので修正の際に安全です。クラス名は短くシンプルに保つことも大事ですが、誰がみても実装が想像できるようなわかりやすく検索性の高い名前に保つことも重要です。

シングルクラスにするべきか？マルチクラスにするべきか？

シングルクラスは要素に原則１つだけのクラスを当てるのにたいし、マルチクラスは１つの要素に複数のクラスをつけます。本記事では、マルチクラスにはいくつかの弊害があるため、なるべくシングルクラスの使用をおすすめしています。

マルチクラスの弊害

マルチクラスは単純な単語のクラス名のまとまりになりがちなので、意図せず個々のクラス名が重複して、スタイルが崩れることがある。
クラスごとに別々のセレクタでスタイルをあてることになるので、要素のスタイルがあちこちに分散して管理しづらい。
どういう単位でクラスをわけるかの基準が曖昧になりチーム内でルールを統一しにくい。

OOCSSならbtn btn-lg btn-primaryになりますが、lg-primary-btn として１つのセレクタでスタイルを管理することを検討してください。

BEM命名規則なら、block__element block__element--modifier やblock__element --modifier となりますが、block__element--modifier として１つのセレクタでスタイルを管理することを検討してください。

単語同士のつなぎ目の表現形式を統一する

クラス名をつける時に単語と単語のつなぎ目をどの形式で表現するか、統一しておくと良いです。以下の４パターンが考えられますが、どれか１つを選んで採用しておくとよいです。大文字、小文字、ハイフン、アンダースコアを使い分けて単語のつなぎ目を表現しています。

パスカルケース

単語の始まりは大文字で、つなぎ目の単語の先頭は大文字にする。

PascalCase

ケバブケース

単語は全て小文字で、単語同士のつなぎ目はハイフンで表現する。

kebab-case

スネークケース

単語は全て小文字で、単語同士のつなぎ目はアンダースコアで表現する。

snake_case

キャメルケース

単語の始まりは小文字で、つなぎ目の単語の先頭は大文字にする。

camelCase

クラス名が思いつかない問題を解決する

部品名をクラス名に含める

部品名はウェブサイトで汎用的に使われるUI名や機能、役割を命名する方法です。

card
list
header
nav
footer
column
button
image
text
link
input

役割をクラス名に含める

ページ内の役割やセクションごとの役割を命名する方法です。

SubmitBtn（送信ボタン）
CancelBtn（キャンセルボタン）
MenuList（メニューボタン）
TitleText（タイトルテキスト）
ThumbnailImage（サムネイル画像）

見た目の特徴をクラス名に含める

色や形など視覚的な特徴を命名に含める方法です。

RedBtn（赤色のボタン）
LargeCard（大きなカード）
RoundedInput（丸みのあるインプット要素）

コンテンツのまとまりを表す単語（セクション名）をクラス名の先頭につける

ページ内の大きなコンテンツのまとまりを表す単語を先頭につけた後に、残りの単語を続けてクラスを命名する方法です。お問い合せセクションならcontact 、ブログ記事セクションならblog になります。

ContactForm（お問い合わせフォーム）
BlogCard（ブログのカード）
HeaderNav（ヘッダーのナビ）
AboutImage（私たちについての画像）

相対的な位置をクラス名に含める（あまりオススメしません）

他の要素との関係性やレイアウトの特徴を命名に含める方法です。レスポンシブでスマホ時とパソコン時で位置関係が変わる場合が多く命名が不適切になるので、できることならなるべく避けた方が良いです。

LeftColumn（左のカラム）
TopLine（上の線）
CenterImage（中央の画像）
InnerSection（内側のセクション）

検索しやすいユニークなクラス名をつける

ページ内でユニークなクラス名を１つだけつけておくと、コードエディタで検索した時に一発でスタイルを当てた要素までたどり着けます。また、意図せずクラス名が重複してしまうのを避けることもできます。

HTMLの親子構造をクラス名に取り入れる

以下のようにして、HTMLの親子構造をクラス名に取り入れることで命名をユニークにすることができます。親のクラス名をハイフン等で繋いであげます。

<header class="Header">
    <nav class="Header-Nav">
        <ul class="Header-Nav-ListGroup">
            <li class="Header-Nav-ListGroup-Item">メニュー１</li>
            <li class="Header-Nav-ListGroup-Item">メニュー２</li>
            <li class="Header-Nav-ListGroup-Item">メニュー３</li>
        </ul>
    </nav>
</header>

状態を表す専用のクラス名にはisをつける

メニューの閉じ開きやスクロール時の要素の表示切り替えなどをクラスの付け替えで表現をすることがあります。この場合は、今までの要素のクラス名とは別に状態を表すクラス名を用意してあげると便利です。原則シングルクラスでコーディングするのがオススメですが、状態を表す時と後述するjavascriptで管理するクラスについては別途クラスを付与してあげると管理しやすいです。

状態を表すクラス名にはis をつけてあげましょう。英語と同じように「is+形容詞」や「is+過去分詞」としてあげるとわかりやすいです。以下のような形になります。

isActive(アクティブな状態）
isScrolled（スクロールされた状態）
isAnimated（アニメーション後の状態）

参考例として、メニューが開いている時と閉じている時のクラス名を以下に示します。

<!-- メニューが閉じている時（初期状態） -->
<div class="Menu"></div>

<!-- メニューが開いている時 -->
<div class="Menu isOpened"></div>

/* メニューが閉じている時（初期状態） */
.Menu{

}
/* メニューが開いている時 */
.Menu.isOpened{
    
}

javascriptで操作する要素にはJSをつける

javascriptで扱う要素もクラスを別途つけてあげると視覚的にjavascriptのイベントが紐づいているかどうかがわかるので便利です。接頭辞にJSをつけましょう。

イベントのトリガーにする要素はJS+イベント名+機能名

JS-click-openMenu（クリックされたらメニューを開く）
JS-change-validateData（値が変化したらバリデーションをする）

参考になるCSS設計ルールやクラス命名規則

世の中にはたくさんのCSS設計やクラス命名規則があります。それらを参考にしながら良いところを取り入れてCSS設計をすることが重要です。いくつかキーワードをピックアップしますので、調べてみると良いかと思います。

OOCSS
BEM命名規則
ECSS
FLOCSS
SMACSS

参考文献

CSSのクラス名を決めるときに使うリストをつくりました

ECSSの概要と考え方のまとめ

破綻しにくい CSS 設計手法と命名規則