2019年6月12日水曜日

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

9:54    No comments

勉強の為に転載しました。

転載元はこちら

ある日のやめ太郎一家

娘（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やないかい！！！」
ブラウザ君「皆やっとるわ！！！」
〜おしまい〜

参考資料

編集リクエスト
676

0 コメント:

コメントを投稿