小三ツ星インターフェイス

OOCSSを土台にしたCSS命名規則

概要

BEM, OOCSS, SMACSSなどのCSSの設計概念はメンテナブルなCSSの設計に重要な概念である。

しかし、いずれも設計思想であって具体的な命名規則ではない。そのため導入してもうまく使いこなせるとは限らない。BEMを導入する際のありがちな失敗として、HTMLの構造をトレースする形でCSSを設計したり、クラス名が長くなりすぎるといったものがある。身に着けるにはある程度の試行錯誤が必要となる。

本規則はその試行錯誤の時間を短くすることを目的とし、不自由なルールとしている。

また解釈があいまいになりがちな英単語ではなく、概念が明確な日本語でキーワードを定義することにした。英単語の方が格好いいが、現場は泥臭いのである。

BEMにおけるBlock、SMACSSにおけるLayoutおよびModuleは「役割」として再定義している。ModifierやStateは装飾を担当する「従属セレクタ」として切り離している。

ルール

  1. 単語間はハイフン1つで結合。キャメルケース、アンダースコアは使わない。
  2. 単語はすべて小文字の英単語を使う。ローマ字表記の日本語は避ける。
  3. IDセレクタ、インラインスタイル、!importantは原則として使用禁止。
  4. クラス名を構成する単語は3語まで。
  5. レイアウトセレクタ、機能セレクタ、従属セレクタ の3種類のクラスに分類される。それぞれ以下の構成となる。
    1. レイアウトセレクタの命名は “役割-場所-詳細”あるいは”役割-詳細”
    2. 機能セレクタの命名は “役割-機能-詳細部品”
    3. 従属セレクタの命名はレイアウトセレクタと同じだが、役割の箇所には dep(depend) か js(JavaScript) が使われる。

レイアウトセレクタはグリッドシステムが該当する。画面上の配置を決定する

機能セレクタは、ナビゲーション、フォーム、ボタンなどの機能に関わるもの。

従属スタイルは、他のモジュールとセットのときのみ有効になるCSSセレクタである。BEMのModifierをBase, Elementから分離したと解釈してよい。

詳細

単語間の結合

BEMではアンダースコア2つ、ハイフン2つが主流でしかもいくらでも結合できるためセレクタ名が長くなりすぎるリスクがある。長すぎる名前はコードの視認性を悪化させる、タイプミスを誘発するなどの問題をはらむ。このような事態は避けるべきである。

アンダースコア、キャメルケースの使用を不可とし、さらに区切り文字をハイフン一つに限定することで、名づけの自由度は大幅に下がる。一見不自由だが、膨大な選択肢を絞り込むことができる。

レイアウトセレクタ

レイアウトやグリッドシステムに関わるのがレイアウトセレクタになる。Bootstrapと互換性があるためそのまま流用してもよいのではないかと思う。

役割：header-, sidebar-, footer-, row, col-, container, jumbotron, card-　など

場所：-home-, -archive-, -post-, -sm-, -lg-, -print- など

詳細：-fix, -hidden, -month, -category, -12, 1by5, -eq など

機能セレクタ

ボタン、メニュー、フォームなどの機能に関わるものは機能セレクタに分類する。

役割：btn-, form-, gnav-, menu-, heading-, lead- など

機能：-hamburger-, -submit-, -cancel-, -item-, -title- など

詳細：-text, -tap, -inner など

従属セレクタ

例えば .dep-red　という従属セレクタは

.dep-red {...}

と書いてはダメで、

.othermodule.dep-red {...}

といった形で、同じ要素にいる他のセレクタに従属していなければならない。

また、子孫セレクタとしての利用は禁止である。入れ子構造のHTMLだと確実に衝突するからである。

NG:　<div class="module"><div class="dep-red"></div></div>

OK:　<div class="module dep-red"></div>

従属セレクタであることはdep（depend）やjs（JavaScript）の接頭辞によって判別する。

独 立していないセレクタの存在はあまり気持ちのよいものではないが、こうすることでCSS,HTMLの両方で変更が行いやすく、また拡張もしやすくなる。 JavaScirptを用いたDOM操作とも親和性が高い。またこれにより構造と装飾は完全に分離され、CSSファイルのサイズが小さくなる。従属セレク タのクラス名は他の機能セレクタなどの従属セレクタにも使いまわしができる。

 そのほかのルール

現在ではほぼ常識といえるような内容となるが、以下のルールを原則とする。

Base

リセットスタイルを適用するセレクタの一群。基本的に上記の命名ルールの適用外で、HTMLの要素の他、微調整用のクラス（margin-topの調整など）に使うセレクタが該当する。

基本的に単語一つで間に合うと思うが、複数の単語を使う場合は、役割-場所・機能-詳細 の原則に従う。

例

.mt10 {margin-top: 10px;}

.small {font-size: 80%;}

基本的にnormalize.cssなどを活用する方がよいと思う。

セレクタの制限

IDセレクタは優先順位の混乱を招くためCSSでの使用は原則禁止。JavaScriptのセレクタとしての利用は可。この場合接頭辞js-は不要（CSSでは使わない原則だから）。

インラインスタイルもメンテナンス性が悪化するので原則として使用を控える。ただし、「その場所でしか使わない本当に特別なスタイル」である場合は使用してもよいが、デバッグ目的で適用するのは絶対禁止とする。

!important も原則として使用を控える。ただし、ウェブサイト提供サービス（カラーミーショップやJimdoなど）によって勝手にインラインスタイルが適用されていて通常の方法での上書きが不可能な場合はその限りではない。