CSSのセレクタで要素名を省略する理由を教えて下さい。

質問

CSSの書き方としてセレクタの要素名を省略する方法がありますが、他人が作ったCSSを見ていると多用している人が多いように見受けられます。

#header{.....}
#footer{.....}
.sample{.....}
等

省略することにより「複数の要素に対して指定できる」のは分かりますが、ID指定などは１箇所にしか存在しない筈ですし、省略することによるメリットがイマイチ理解出来ません。

div#headerと書かず#headerと書く理由を教えて頂けないでしょうか。
宜しくお願い致します。

回答No.1

dezimac · ベストアンサー

個人の好みとも言えます。

要素名抜きの方が便利な場合もあります。
HTMLで、
<div id="header">
としていたのを
<h2 id="header">
と書き換えたりした場合
CSSに要素名あったら、そちらも変更する必要があります。
#headerだけだったらそのままでいいですからね。
もっとも、そうなればCSSの内容は書き換えるのだろうけど。

少しでも容量を節約できるというメリットもあります。
数文字分（数バイト）ですが。

お礼

レスありがとうございます。

＞#headerだけだったらそのままでいいですからね。
うーん、すごくまれなケースの様な気がしますね。

＞少しでも容量を節約できるというメリットもあります。
これはあるかも..と思いました。
昔、何かの本でCSSとかJavascriptの外部ファイルをガチガチに最適化して、読み込みを速くする話が載ってたのを思い出しました。

「個人の好み」なんでしょうか...
私個人としては要素名が無いと何のスタイル指定か分かりにくいなぁと思います。

回答No.2

noname#77303

こんにちは。

要素名を省略する理由なのですが、面倒くさいからと言う人も居れば、見やすいからと言う人も居ると思います。
それは好みの問題で、客観的なメリットは無いと思います。（わずかに手間が省けるくらい）

しかし、逆に言えば、IDはそのページに１つだけですから、作り手は「#headerといえばこの範囲！」と分かる訳です。
ソースを人に見せたり教える場合は省略しない方がいいと思いますが、
そうでない限りは、そこに要素名を付け足す客観的なメリットも無いのではないでしょうか。

お礼

ご意見ありがとうございます。

なるほど、作り手が一人あるいは社内ルールがある程度あれば「#header」でもよさそうですね。

もともと『要素名が無くて「#header」だと、どこの事だか忘れるかも知れんやん』と思っていましたが、よく考えたら「div#header」って書いても忘れる時は忘れるし、『じゃぁ「#header」でも楽でいいか』っと最近思い始めましたｗ。