CSSを記載する時、現場ではセレクタにタグ名まで記載しますか？

Question

CSSを記載する時、現場ではセレクタにタグ名まで記載しますか？

グーグルのコーディングルールには省略するように記載されていたので省略したのですが、
BEMを使っても、どうも分かりにくいです。

Answer 1

class・idがある場合はCSSセレクタにはタグ名を入れない方が高速になるので、
タグ名を入れない方が良いとされているのだと思います。

CSSのセレクタは、右から左に判別していきます。ですので

.foo {}

これは、fooというクラスを探すだけですが

a.foo

タグ名をつけると、fooというクラスを探した後で、その中でaタグであるものを探すします。
探す回数が多いのでその分遅くなります。

順番に探していくので子孫セレクタも当然遅いです。

div#main ul.navList li {} 

これは liタグを探して、その親がnavListクラスを持っている要素を探して、その上でulタグのものを... となりますので、いっそliタグにクラス名を付けて

.listItem {}

とする方が断然高速になります。

と言っても。
セレクタでスタイルが当たる範囲を絞り込んで無い分、HTMLとCSSの設計には注意しなければならなくなります。作業効率やメンテナンス性・可読性などを考慮すると、高速なセレクタ至上主義が絶対的に正しいとは言い切れない部分も出てきますので、このプロジェクトではどう書くかというコーディングルールを選択・作成すれば良いのではないかと思います。

Comments

[退会済みユーザー]

CSSの数は最低でも、レスポンシブなら数百があるので、タグを入れない方が、かなりレスポンスは良くなると考えてよいのでしょうか？

正直ないと管理はしにくいのですが、コンバージョン率が変わる位の差があるのであれば、その方が良さそうですね。BEMでクラス名が長くなる方がよほど軽いのですね。

子孫セレクタも、無視できないほどのレスポンスの差があるのですね。
０は難しいですが、クラスを7割位が良いのですね。

[KiKiKi_KiKi]

レスポンシブWEBデザインにするという事は、基本的に回線速度の出ないモバイルを基準考えるモバイルファーストの概念を取り入れたほうが幸せになれると思いますので、パフォーマンスには気を使うのが良いかと思います。
セレクタに気を使いファイルも巨大にならないようCSSを設計するのであれば、gruntやgulpで結合して1ファイルにしてmin化してgzip化するくらいまではした方がよいかもです。

セレクタにタグが有る無しによる 管理しやすい/管理しにくい はちょっと失礼な言い方になってしまいますが、慣れの問題でしか無いかと思います。
個人でやっている場合はまぁ好きにすれば良いと思いますが、チームで開発をしている場合は基本的にタグ名無しというコーディングルールにして著しく開発のパフォーマンスが低下するのであれば、納期と相談してルールを考えなおすなどしたほうが良いと思います。
実際問題、CSSのセレクタの指定方法よりもっとパフォーマンスに影響を与える部分は沢山あると思いますので。

2011年の記事ですが、ブラウザ別に計測してみたというものがありましたので参考に
http://developers.linecorp.com/blog/?p=178

こちらも少し古い本ですが、
オライリーのハイパフォーマンスWebサイト などは高速化の参考になると思います。
http://www.amazon.co.jp/dp/487311361X/