OREMATOPEE

プログラミング、気になったこと、メモ書き...etc

CSSのセレクタにタグは指定しないほうがいい

フィヨルドブートキャンプmachidaさんからいただいたFBで、セレクタの指定によるブラウザの挙動を理解することが大事だとわかった。

結論

当初自分ではclassのセレクタにタグを併せて記載する指定をしていた。(classだけではなんの要素かわかりにくいと思ったため)

div.form-items {}

通常CSSセレクタは左から右へ詳細度が高くなるように記載する。
しかし、ブラウザは右から左に解釈するため、上記CSSでは.form-itemsclassを理解した上で、そのclassに当てはまるdivタグをページから走査するみたい。
このため単純にclassのみをセレクタに書いた場合と比べて、パフォーマンスが悪くなる。 また、このようなタグをセレクタに記載すること自体、対象のHTMLに依存していて再利用性が低いという観点もありよろしくないとされている。

上記の再利用性が低いことやBEMなどの設計にセレクタの運用を合わせるためなどの理由で、最近はセレクタにタグやIDを使わずclassを指定するのが主流ということもわかった。

参考文献

ブラウザのCSS解釈方法についての衝撃事実