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

## ある日のやめ太郎一家
娘（3歳）「パパ、**レンダリング最適化**されたCSS書いてる？」

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

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

ワイ「ああ、そのレンダリングか」
ワイ「よう知っとるわ」

よめ太郎「（CSS関係で**他にどんなレンダリングがあんねん**）」
よめ太郎「（また**知ったかぶり**しとるわ）」

ワイ「ワイはいつも描画速度を意識してCSSセレクタを書いてるで？」
ワイ「例えばWebサイトのヘッダ部分にある、サイト名のところにスタイルをあてる場合で・・・」

```html
<header>
  <div>
    <a href="/">やめ太郎のサイト</a>
  </div>
</header>
```

ワイ「↑こんな感じのhtmlがあったとしたら・・・」

```css
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`要素から探しいや」

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

```css
.list .item {
  border: 1px solid;
}
```

ブラウザ君「↑こういうCSSがあったとして」
ブラウザ君「**左から**セレクタを読む場合やと───」

> ブラウザ君「ええと」
ブラウザ君「`list`いうクラスが付いた要素は、全部で100個あるな」
ブラウザ君「その100個の要素たちの**子孫要素**を調べていくで」
ブラウザ君「`item`いうクラスを持った子孫要素はどこや〜？」
ブラウザ君「・・・って**1個も無いんかい！！！**」

ブラウザ君「───ていうこともあり得るからな」
ブラウザ君「むしろ**右から**読んだほうが───」

> ブラウザ君「ええと、`item`いうクラスがついた要素は・・・」
ブラウザ君「・・・**無いな**」

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

ワイ「なるほどな」

## ワイ、最強の命名規則を思いつく
ワイ「ほなブラウザ君・・・！？」
ワイ「↓こんなルールでクラス名を付けるのはどうや！？」

```html
<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のセレクタ的には───」

```css
.list__item {
  border: 1px solid;
}
```

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

> 「`item`は100個あるな・・・」
「ほな、その子らの親に`list`がおるか調べて・・・」
「**結局5個しかないんかい**」

ワイ「↑こんな風に調べんくても」

> 「**`list__item`は5個あったで！**」
「**スタイル適用するで！**」

ワイ「**↑これで終わりや**」
ワイ「完璧やな・・・」
ワイ「一意なクラス名にすることで」
ワイ「**他の箇所と被ってて、知らん間にスタイルが崩れてもうた！**」
ワイ「・・・的な事故も防げるしな」
ワイ「あっ！更に思いついたで」
ワイ「この`list__item`だけ**文字を太くしたい**、とかいう**バリエーション違い**を指定したい場合は───」

```html
<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`いうクラス名を**追加してやって**」

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

ワイ「↑こういうセレクタを書けばええんや」
ワイ「**革新的なアイデア**やで・・・！！！」
ワイ「この命名規則の名前は何にしよか」
ワイ「**Parent、Child、Variation**の頭文字を取って、」
ワイ「**PCVや！！！**」
ワイ「**どや！？ブラウザ君！？**」

ブラウザ君「・・・**それBEMやないかい！！！**」
ブラウザ君「**皆やっとるわ！！！**」

**〜おしまい〜**

## 参考資料
[ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM](https://hayato.io/2017/dom/#css-1)

## 参考資料2
実際にChromiumのソースコードを見て解説してはる**猛者**がいらっしゃったで！

**[ブラウザはCSSのセレクタを右から読む、ほんまか？](https://qiita.com/kazatsuyu/items/b94733555f34f2645221#fn1)**