cssのクラスやid名を決める命名規則の考え方 │ Triple Threat(トリプルスレッド)

こんばんわ。たいそん(@ttaison)です。

これまでずっと、一人でweb制作してきたので正直あまり気にならなかったのですが、
チームで仕事をすることも視野に入れると気になってくるのが、コードの書き方。

とくにcssは、記法さえ守ればどんな書き方も出来てしまうので、
誰かが書いたコードを他の人が見たらものすごい見にくいコードになっているかもしれません。

それゆえ「いいクラス名を付けよう」と考えることに時間がかかって面倒と感じる方も多いのでは？

それに大規模設計などでコードが複雑化した際も、cssは以下のような理由からスタイルが破綻してしまう場合もあります。

セレクタに優先順位が存在するため、上書きできてしまう
親要素のスタイルが子要素に継承される
同じセレクタを複数定義できてしまう
html要素にクラスを複数登録できてしまう
ぶっちゃけると日本語クラスでも定義可能

とにかく書き換えやすさが逆に弱点となっている感じですね。

では、そんなcssをどうしたら読みやすく統一しやすい書き方にできるのか！？
それを考えていきたいと思います。

1. css設計の問題について
2. 問題から探る破綻しにくいcss設計
3. まとめ

css設計の問題について

先ほど上記であげたスタイル破綻の問題点をもとに、破綻しにくいcssのコーディング規約を考えていきましょう。

セレクタに優先順位が存在するため、上書きできてしまう

cssには優先順位が存在します。あたっているクラス名の詳細度が高い方のスタイルが優先されるので、下記の場合、cssの上書きが起きます。

/** css ******/
.wrap .bar{
	color: white;
}
#foo{
	color: red;
}
.bar{
	color: blue;
}

/** html ******/
<div class="wrap">
<p id="foo" class="bar">テキストです。</p> //idはクラスより優先され、文字色はredになる
<p class="bar">テキストです。</p>　//.wrap .barの方が.barより詳細度が高いので、文字色はwhiteになる
</div>

この場合.wrapに囲まれた.barにスタイルをあてているため、
他のページで.barスタイルをあてる時に混乱が起きそうですね。

文字色ブルーにしたいのにたまたま.wrapで囲んじゃってたから白になっちゃった。とか、、、

親要素のスタイルが子要素に継承される

例えば下記のコードのような場合。

親要素(p)のフォントサイズは、子要素(span)に継承されるため、
下記の状態でフォントサイズを変えたい場合は、すべて再定義しないといけません。

/** css ******/
p{
	font-size: 15px;
}
span.a{
	font-size: 12px;
}
span.b{
	font-size: 13px;
}  

/** html ******/
<p><span class="a">ここは12px</span></p> 
<p><span class="b">ここは13px</span></p>

ページをまたいで同様の要素構成があった場合、気づかず似たようなスタイルを追加定義してしまうかも。

同じセレクタを複数定義できてしまう

cssは同じセレクタ名を複数定義してもエラーにはなりません。

/** css ******/
.foo{ color: red;}
.foo{ color: blue;}//宣言が後のモノが優先されるので、.fooのカラーは青に

この問題点は上述した継承にも通じるのですが、間違って同じクラスやスタイルを複数定義してしまう可能性があります。

html要素にクラスを複数登録できてしまう

これはhtml側の書き方に関する問題ですが、 idと違って、クラス名はいくらでもhtml要素に付与できる仕様になっています。

/** css ******/
.style1{ color: red;}
.style2{ font-size: 16px;}
.style3{ font-weight: bold;}

/** html ******/
<p class="style1 style2 style3">スタイルは合成されます</p>

一見してスタイルの使いまわしは利きそうですが、見にくいし、
どんなスタイルがあたっているか判断しにくいですね。

ぶっちゃけると日本語クラスでも定義可能

cssのクラス名には、日本語を定義することもできます。

/** css******/
.お父さん{
	background-size: 2px;
}

/** html ******/
<div class="お父さん">お父さんだよ</div>

今だとcharsetの設定もutf-8などに統一されて
言語の問題も少なくはなってきているでしょうが、
万一に文字化けなんかのリスクを考えるとやっぱり避けたいですよね、、、

問題から探る破綻しにくいcss設計

上記の問題をまとめると以下のとおり。

詳細度が高いスタイルがあると、そっちにスタイルがひっぱられてしまう（継承も同様）
間違って同じようなクラス名を定義しちゃうかも。
html要素にクラス名の連打は避けたい
日本語クラス名は避けたい

う～ん。どれも一度は頭を悩ませたことのある問題です、、、（いまだに悩まされているかもしれん）

これらを解決するために考えるcss設計ですが、
とにかく「わかりやすく」「統一感」があって「変更に強い」命名をしたいワケですよね。

少し考えてみましょう。

わかりやすい英語ベースの名前を付ける

日本語を避けたい。というのも含まれていますが、なにより「わかりやすい」のを念頭に命名をしていきたいものです。

英語ベースにそのクラスはどんなスタイルがあたるのか、
パッとイメージできる名前にするのが良いでしょう。

例えば汎用の文字を赤にするスタイルがあるならば、

universal-text-red{
	color: red;
}

少し大げさですが(笑)
こんな感じだとパッと見どんな機能を持つクラスなのか一目瞭然ですね。

統一感のある命名規則

デザインの中にはコンポーネント化した部分に似たようなスタイルをあてることも多々あります。

そのような似た性質を持つ要素には関連しているよー。
ということを明示した方が分かりやすいですよね。

例えば、

.card{　//統一命名部分
	display: inline-block;
	padding: 1.6rem;
	text-align: center;
	border: 2px solid #ccc;
}
.box-border-red{
	border-color: red;
}
.box-border-blue{
	border-color: blue;
}

<div class="card box-border-red">1</div>
<div class="card box-border-blue">2</div>

//cardが入ることで、違うページに展開されても同じような要素だということが分かる

cardという統一規格のもと、色の着せ替えを行っているので、
2つが同じグループの要素だと分かりやすいですね。

変更に強い命名をする

これもweb制作にたずさわる者なら誰しも経験があるかと思いますが、制作途中のデザイン変更指示。はっ？となってもやるしかありません。

こんな時にもし、クラス名を変更しないと対応できないような状況に陥ったらサイアクですね。

そうならないようスタイル定義の段階からしっかりとした切り分けをおこない、
変更に強い命名をしたいものです。

//よくない例
.card-left{ //特定の要素に動作をしめす値が入ってしまっている
	float: left;
}
↓　//デザイン変更になった場合、名前も変更しなければならない

.card-right{ //めんどくせー！
	float: right;
}

//よい例
.card{...}

.left{
float: left;
}
.right{
float: right;
}
↓ //cardのベースデザインの切り分けができているので、クラス名を変更する必要なし
//html要素側の対応だけで解決
.card{...}

.left{
float: left;
}
.right{
float: right;
}