2019年6月12日水曜日

ブラウザ君「ワイは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やないかい!!!
ブラウザ君「皆やっとるわ!!!
〜おしまい〜

参考資料

0 コメント:

コメントを投稿