質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,006
退会済みユーザー

退会済みユーザー

body > header > div > a {

}
body > div > nav {

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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/13 23:58

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

    キャンセル

  • 2015/08/14 00:00

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

    キャンセル

+1

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/14 07:33

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

    キャンセル

0

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

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

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

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

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

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


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/13 23:58

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る