CSSセレクタの名前を付けるときに考えていること

idを使うときも同じだけど、話をわかりやすくするためにclassに統一するということで。個人的にはセレクタにidは使わない派です。

先日、@cssradarさんが「自分の仕事はclass名を決めた時点で8割終了している」みたいなことを言ってて、僕も概ね同意している。それほどにCSSでは命名が大切だと思う。そこで僕が普段どう考えてCSS セレクタに名前をつけ、ルールセットを定義しているのか書いてみた。

1. class名は意味を表すようにする（見た目の情報をのせない）

例えば、以下のようなもので

.red {
  color: #f52;
}

.rounded {
  border-radius: .25rem;
}

.left-arrow {
  ... 
}

赤色だとか角丸だとか、見た目を表したclass名は付けないようにしている。というのも、class名はHTMLのclass属性に書くもので、HTMLには論理構造だけを書きたいからだ。

HTMLの要素を視覚的に強調させる意味で.redという名前になっているなら、.emphasisとかにするし、もしエラーの意味があるなら.error等にする。 Twitter Bootstrapの色も、赤は.dangerだったり、緑は.successだったりする。

.roundedもコンテンツが入るボックスを角丸にしたいのなら.content-boxの中にborder-radiusを書くべきだと思し、.left-arrowについても、戻るボタンを意味しているなら.back-btn等にする。

また、.roundedはSassで言うところの@extendのような、ルールセットを継承する機能を持つプリプロセッサーを使っているなら、

%rounded { 
  border-radius: .25rem;
}

.content-box {
  @extend %rounded;
  ... 
}

このようにしても（した方が）いいと思う。 HTMLのclass属性に書かれないセレクタには見た目の情報が入っていてもいいし、こうすることでSassファイル内での再利用性が高まる。

例えば、Twitter Bootstrapを使ってたりすると、赤いボタンは全て.btn-dangerにしがちだと思う。同じ赤色のボタンでも、強調させたいから赤色にしているボタンには.btn-emphasis、削除ボタンには.btn-dangerとすべきだと思う。

たまたま、見た目（この場合は色）が同じであっても、意味や用途が異なるなら別に名前を付け、セレクタをわけるべきだと思う。

.btn-danger,
.btn-emphasis {
  background-color: #f52;
}

これはHTMLに正しく意味を記述するということでもそうだし、もし後で「強調させているところの色はオレンジにしよう」となったとき等にデザインの修正に耐えやすい。

かなり細かいことを書いたが、真にHTMLとCSSを疎結合にし保守性を保つためには大切なことだと思っている。HTMLとCSSをただ別ファイルに書くだけで構造と体裁を分離することはできない。

あと、僕は主にWebサイトのHTMLとCSSを書くことが多いので上記のことを気をつけているが、アプリケーション（WebViewのスマホアプリとか）を作ってたりするとこのようにしない方がいいかもしれない。

時と場合によるCSS記述の良し悪しを評価できるようなものを作りたい。