Help us understand the problem. What is going on with this article?

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

ある日のやめ太郎一家

娘(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のソースコードを見て解説してはる猛者がいらっしゃったで!

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

yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした