HTML
CSS
bem
セレクタ
レンダリング

ブラウザ君「ワイはCSSのセレクタを右から読むんや」


ある日のやめ太郎一家

娘(3歳)「パパ、レンダリング最適化されたCSS書いてる?」

ワイ「なんやレンダリングって」

娘「ブラウザがWebサイトを描画することだよ」

ワイ「ああ、そのレンダリングか」

ワイ「よう知っとるわ」

よめ太郎「(CSS関係で他にどんなレンダリングがあんねん)」

ワイ「ワイはいつも描画速度を意識してCSSセレクタを書いてるで?」

ワイ「例えばサイトのヘッダ部分のaタグにスタイルをあてるとしたら」

<header id="header">

<a href="/">hoge hoge</a>
</header>

ワイ「↑こういう風に、ちゃんとidを振ってやって」

#header a {

font-weight: bold;
}

ワイ「↑こんな風にセレクタを書いてやるんや」

ワイ「そしたらブラウザ君も」


ブラウザ君「#headerの中のaは1個だけやから、すぐ見つかったわ」

ブラウザ君「ホンマ探しやすいわ〜」

ブラウザ君「ありがとう、やめ太郎はん


ワイ「ってなるわけや」

ワイ「ワイはいっつもブラウザ君のことを1番に考えてるで

ワイ「あ、娘ちゃんの次やから2番やな

よめ太郎「(嫁はブラウザ以下かい・・・)」

娘「パパ、やっさしい〜」


ブラウザ君「全然ちゃうで

よめ太郎「ファッ!?

よめ太郎「ブラウザが喋った!?」

ワイ「何を驚いとんねん」

ワイ「インコオウムかて日本語を喋んねんから」

ワイ「ブラウザ君が喋ったって不思議やないで」

よめ太郎「(何やその理論)」

よめ太郎「(インコオウム意思疎通できてると思ってたんかい)」

よめ太郎「(ていうかブラウザ君も関西弁なんかい)」

ワイ「とにかくブラウザ君の話を聞いてみようや」


ブラウザ君の言い分

ブラウザ君「ワイはCSSセレクタを右から読むんや

ブラウザ君「さっきの#header aの例やと───」


ブラウザ君「まず、このページにあるa要素を全部探すで!」

ブラウザ君「1, 2, 3, 4, 5...」

ブラウザ君「ふう、全部で100個やな」

ブラウザ君「そんで、そのa要素たちの中で」

ブラウザ君「headerというidを持った要素を親に持つのは・・・」

ブラウザ君「・・・なんや1個だけかい!!!


ブラウザ君「───こんな感じや」

ワイ「まじか」

ワイ「なんでそんな非効率的な探し方すんの」

ワイ「先に左側のidを探しいや」

ブラウザ君「いや、右から読むのが必ずしも非効率的とは限らへんで」

ブラウザ君「例えば───」

.list .item {

border: 1px solid;
}

ブラウザ君「↑こういうCSSがあったとして」

ブラウザ君「左からセレクタを読む場合やと───」


ブラウザ君「よっしゃ、まずは」

ブラウザ君「listいうクラスが付いた要素を全部探すで!!!

ブラウザ君「1, 2, 3, 4, 5...」

ブラウザ君「ふう、全部で100個やな」

ブラウザ君「今度は、その100個の要素たちの子孫要素を調べていくで」

ブラウザ君「itemいうクラスを持った子孫要素はどこや〜?」

ブラウザ君「・・・って1個も無いんかい!!!


ブラウザ君「───ていうこともあり得るからな」

ブラウザ君「むしろ右から読んだほうが───」


ブラウザ君「よっしゃ、探していこか」

ブラウザ君「itemいうクラスがついた要素は・・・」

ブラウザ君「・・・無いな


ブラウザ君「───って早々に諦められるやん」

ワイ「なるほどな」


ワイ、最強の命名規則を思いつく

ワイ「ほなブラウザ君・・・!?」

ワイ「↓こんなルールでクラス名を付けるのはどうや!?」

<ul class="list">

<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
</ul>

ワイ「itemだけやなくて、親要素のクラス名listも頭につけて」

ワイ「list__itemいうクラス名にすんねん」

ワイ「こんな感じのルールをページ内の全ての要素に対して徹底すれば」

ワイ「ユニーク(一意)なクラス名になるから、サクッと見つけられるやん」

ワイ「CSSのセレクタ的には───」

.list__item {

border: 1px solid;
}

ワイ「↑こんな感じで指定すんねや」


「まずitemを全部探して、今度はその子らの親にlistがおるか調べて・・・」


ワイ「とかやなくて」


list__itemを探すで!

スタイル適用するで!


ワイ「↑これで終わりや

ワイ「完璧やな・・・」

ワイ「一意なクラス名にすることで」

ワイ「他の箇所と被ってて、知らん間にスタイルが崩れてもうた!

ワイ「・・・的な事故も防げるしな」

ワイ「あっ!更に思いついたで」

ワイ「このlist__itemだけ文字を太くしたい、とかいうバージョン違いを指定したい場合は───」

<ul class="list">

<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
<li class="list__item">テキスト</li>
<li class="list__item list__item--bold">テキスト</li>
</ul>

ワイ「↑こんな感じでlist__item--boldいうクラス名を追加してやって

.list__item {

border: 1px solid;
}
.list__item--bold {
font-weight: bold;
}

ワイ「↑こういうセレクタを書けばええんや」

ワイ「革新的なアイデアやで・・・!!!」

ワイ「この命名規則の名前は何にしよか」

ワイ「Parent、Child、Versionの頭文字を取って、」

ワイ「PCVや!!!

ワイ「どや!?ブラウザ君!?

ブラウザ君「・・・それBEMやないかい!!!

ブラウザ君「皆やっとるわ!!!

〜おしまい〜


参考資料

ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM


参考資料2

実際にChromiumのソースコードを見て解説してはる猛者がいらっしゃったで!

ブラウザはCSSのセレクタを右から読む、ほんまか?