最低限おさえておきたいCSSのクラス名の付け方

Written by Erika Kitada

HTMLの構造やCSSの命名は、最初にある程度、設計しておかないと後々カオスになってしまうことがあります。

ここでは最低限おさえておきたいクラスの付け方について紹介したいと思います。

クラスを付けるときに気を付ける点

  • HTML要素やDOMツリーに依存しないで、詳細度の低いクラスを利用する
× .side div h2.ttl
○ .ttl
  • JS専用のクラス js- このクラスには見た目のスタイルを当てない
× .js-accordion { padding: 10px; }
○ .accordion { padding: 10px; }
○ $('.js-accordion').on('click', function(){})
  • idを使わない。idを使わなくてもCSSは問題ないので、idはjsでのみ使用する
    (jQueryでDOMを取得する際、IDによる取得は内部的にdocument.getElementByIdが使用され最も高速)
× #content
  • クラス名が重複しないよう、ユニークな名前を付ける
○ .top-content
  • アンダーバーやハイフン、キヤメルケースを混在させない(BEMは除く)
× .iconArrow-left
○ .icon-arrow-left

クラス名の命名

  • ×　コンテンツの見た目を説明するクラス名
    例）.news　ニュース以外のコンテンツには利用できない。使いづらい。
  • ○　コンテンツから独立したクラス名
    例）.btn, .item-list 　柔軟で、再利用可能になる。

見た目に左右されない汎用的なクラス名の例

container
header
head
site-title
logo
catch
intro
key-visual
nav
global-nav
page-path
bread-crumb
main
main-content
side
footer
article
guide
next
prev
page-top
info
error
date
list
item
photo
img
thumb
figure
txt
note
banner
pr
lead
spot
col
area
cassette

汎用的なクラスの組み合わせ例

たとえば、wrapperというクラス名は必要でしょうか。

CSSが使われるようになってから、wrapperはいろいろなソースで目にすることがありましたが、
昨今のCSSのモジュール化の流れを見ると、モジュール＞エレメントという構造をクラス名で表現するようになり、人によっては、wrapperを選ばないかも知れません。

  • よくあるカルーセルのクラス名の例
<div class="carousel-wrapper">
    <div class="carousel">
    </div>
</div>
  • カルーセルというモジュールをベースにしたクラス名の例
    （モジュール構造の基点がわかりやすい）
<div class="carousel">
    <div class="carousel-inner">
    </div>
</div>

スケールを考える

トップページのデザインは、下層ページのデザインと大幅に違うことがあります。

また、会員登録導線や商品一覧ページなどでもデザインは異なるでしょう。

これら、すべてのCSSを一緒にしてしまうと、容量も大きくなり煩雑となるので

トップページだけが読むCSS、そのカテゴリのみが読むCSSとわけて

該当するクラスが、どこまでの範囲に影響を与えるか可視化すると後々のメンテナンスに生きてきます。

プリフィックスを付けてスケーラブルに

クラスが、サイト内のどの範囲に有効かを可視化するには、対応するcssファイルの名前と同じプリフィックスをクラスにつけます。

top.css　トップページのCSS

.top-key-visual
.top-content

registration.css　会員登録導線のCSS

.reg-nav
.reg-content

まとめ

Webサイトは更新され、成長していくメディアです。集客数、CVRの変化に応じて施策を打っていくサイトも多いでしょう。

クラス名は、サイトを更新していく上でも重要な部分です。命名や詳細度は、メンテナンスに深く影響するので、これらのルールを抑えると、ソースやデザインが壊れていくリスクが、だいぶ回避できるかと思います。