ある日のやめ太郎一家
娘（3歳）「パパ、レンダリング最適化されたCSS書いてる？」
ワイ「なんやレンダリングって」
娘「ブラウザがWebサイトを描画することだよ」
ワイ「ああ、そのレンダリングか」
ワイ「よう知っとるわ」
よめ太郎「（CSS関係で他にどんなレンダリングがあんねん）」
よめ太郎「（また知ったかぶりしとるわ）」
ワイ「ワイはいつも描画速度を意識してCSSセレクタを書いてるで？」
ワイ「例えばWebサイトのヘッダ部分にある、サイト名のところにスタイルをあてる場合で・・・」
<header>
<div>
<a href="/">やめ太郎のサイト</a>
</div>
</header>
ワイ「↑こんな感じのhtmlがあったとしたら・・・」
header div a {
font-weight: bold;
}
ワイ「↑こんな風にセレクタを書いてやるんや」
ワイ「そしたらブラウザ君は」
ブラウザ君「このページの中で、
header要素は・・・お、この1つだけやな」
ブラウザ君「ほんで、その中のdiv要素は・・・この1つだけやな」
ブラウザ君「ほんで、更にその中のa要素は・・・この1個だけやな！」
ブラウザ君「特定しやすいようにセレクタを書いてくれたから、すぐ見つかったわ〜」
ブラウザ君「ありがとう、やめ太郎はん」
ワイ「ってなるわけや」
ワイ「ワイはいっつもブラウザ君のことを1番に考えてるで」
ワイ「あ、娘ちゃんの次やから2番やな」
よめ太郎「（嫁はブラウザ以下かい・・・）」
娘「パパ、やっさしい〜」
ブラウザ君「全然ちゃうで」
よめ太郎「ファッ！？」
よめ太郎「ブラウザが喋った！？」
ワイ「何を驚いとんねん」
ワイ「インコやオウムかて日本語を喋んねんから」
ワイ「ブラウザ君が喋ったって不思議やないで」
よめ太郎「（何やその理論）」
よめ太郎「（インコやオウムと意思疎通できてると思ってたんかい）」
よめ太郎「（ていうかブラウザ君も関西弁なんかい）」
ワイ「とにかくブラウザ君の話を聞いてみようや」
ブラウザ君の言い分
ブラウザ君「ワイはCSSセレクタを右から読むんや」
ブラウザ君「さっきのheader div aの例やと───」
ブラウザ君「このページの中には
a要素が100個あるな！」
ブラウザ君「そんで、そのa要素たちの中で」
ブラウザ君「div要素を親に持つのは・・・」
ブラウザ君「50個あるな！」
ブラウザ君「ほな、その50個のdiv aたちの中で」
ブラウザ君「header要素を親を持つのは・・・」
ブラウザ君「・・・なんや1個だけかい！！！」
ブラウザ君「───こんな感じや」
ワイ「まじか」
ワイ「なんでそんな非効率的な探し方すんの」
ワイ「先に左側のheader要素から探しいや」
ブラウザ君「いや、右から読むのが必ずしも非効率的とは限らへんで」
ブラウザ君「例えば───」
.list .item {
border: 1px solid;
}
ブラウザ君「↑こういうCSSがあったとして」
ブラウザ君「左からセレクタを読む場合やと───」
ブラウザ君「ええと」
ブラウザ君「listいうクラスが付いた要素は、全部で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は100個あるな・・・」
「ほな、その子らの親にlistがおるか調べて・・・」
「結局5個しかないんかい」
ワイ「↑こんな風に調べんくても」
「
list__itemは5個あったで！」
「スタイル適用するで！」
ワイ「↑これで終わりや」
ワイ「完璧やな・・・」
ワイ「一意なクラス名にすることで」
ワイ「他の箇所と被ってて、知らん間にスタイルが崩れてもうた！」
ワイ「・・・的な事故も防げるしな」
ワイ「あっ！更に思いついたで」
ワイ「この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、Variationの頭文字を取って、」
ワイ「PCVや！！！」
ワイ「どや！？ブラウザ君！？」
ブラウザ君「・・・それBEMやないかい！！！」
ブラウザ君「皆やっとるわ！！！」
〜おしまい〜
参考資料
ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM
参考資料2
実際にChromiumのソースコードを見て解説してはる猛者がいらっしゃったで！