ClassやIDを使わずにセレクタのみでデザイン

Question

body > header > div > a {

}
body > div > nav {

}

のようにClassやIDを使わない、のしくは親要素にしか使わないような書き方はルール的にどうなのですか？
個人的には指定はあまり好きではないのでjavascriptなど以外ではあまり使いたくありません。
classを使用しないことで表示速度が速くなる、もしくは遅くなることはありますか?

Answer 1

htmlを極力いじらないでデザインしたい気持ち、良くわかります。

基本的には、classはページ内に複数存在する可能性があるので、ブラウザはそれらを全部探しに行くぶん少々時間がかかりますが、idは原則一個のみなので高速な動作が期待されます。
body > header > div > aのような指定も、特定の子孫要素だけを探せば良いので、高速化が期待されます。
jQueryなどを使う場合も同様で、ページ内に複数ある要素を指定するとやや遅くなります。
Web標準的にも特に問題ないと思われます。

とは言えこれらはあくまで原則なので必ずそうなるというものでもありません。
それとは別に、更新や運用の手間を考え、わずかな速度差よりコードの可読性を重視する流れもあります。
なので、必要に応じてidやclass指定なども適切に使い分けるのが良いかと思います。
チームの場合はローカルルールを作るのも一案ではないでしょうか。

Comments

[退会済みユーザー]

ありがとうございます！
必要最低限で抑えれるように頑張りたいです！

[退会済みユーザー]

なるほど。こういう書き方をするとHTMLの構造を変更しづらくしますね。勉強になりました。

Answer 2

ちなみにブラウザはセレクタを「右から左」に向かって検索していくので注意が必要です。

またこれは個人的な考え方ですが、IDは詳細度が高すぎてメンテナンス性に問題を起こすことが多く、できるだけクラスを利用するほうがいいと考えています。

また、クラスなどを指定せずに、というのは気持ちはわかるのですが、要素の構造は容易に変更されうるので（デザイン変更でHTML自体に変更が生じたり、JSであとから挿入されたりなど）、構造に依存するのは望ましくありません。

逆にクラスで管理しておけば、多少構造が変化してもレイアウトが崩れにくいというメリットがあります。
例えばよくあることとして、当初はp要素を想定していたものの、ブロック要素を内包する必要が出てきてdiv要素を使う必要が出てきた、などですね。

なので、「IDは使わず、出来る限りクラスでCSSを適用する」というのが現状の自分の中のルールとなっています。

Comments

[退会済みユーザー]

よく考えれば右から左の方が自然でしたね・・・
てっきり左から右だと思っていました。ありがとうございます!

Answer 3

classやidを一切使わず、タイプセレクタのみを使ったセレクタでCSS指定することは
実際問題恐らく不可能です。HTMLページ内の特定の箇所を選択する時に、
最上位の要素が一切他と被らずに目的の箇所を選択できることなどまずありません。
かならずどこかしらは同じ要素が同列で被ってしまうので、
そうなったら否応なしにidやclassを使わざるを得ません。

最上位のコンテナ要素のみにid/classを指定して、子要素以下には名前指定をしない方法は
ルールとして一応有りですが、そういうセレクタ指定は「修正・変更に弱い」
という弱点があることを十分理解した上で利用すべきかと思います。

タイプセレクタや子孫・子セレクタといったものは、HTML構造に依存しますので
HTML構造が変化した場合にはCSSも合わせて修正しないとデザインを維持できません。
また、同じデザインなのにHTML構造は違うといったようなケースの場合に、
CSSを流用することもできません。

私もできればあちこちclassをつけまくるのは避けたい気持ちが強い方ですが、
そうは言っても修正・変更・流用にある程度対応できるように書いておかないと
結局は自分やチームの他の人が困ることになるので、
最近は大体スタイルはclassセレクタで管理するようにしています。

最近はセレクタ設計も「オブジェクト指向」的な考え方を取り入れるのが
主流（？）となってきているようです。
「CSS設計の教科書」

こんな本も出ているくらいですので、
HTML構造に依存しないセレクタを作ることの意義やメリットについて
少し勉強してみるのも良いのではないでしょうか？

Comments

[退会済みユーザー]

ありがとうございます！
必要最低限で抑えれるように頑張りたいです！