css - div#name と #name

Question

スタイルシート div#name と #name で同じことを行うことを知っています。個人的には、ほとんどのスタイリングで div#name を使用しています。これは、その方がわずかに高速であり、CSS を見ることで HTML 要素をより簡単に識別できるという理由からです。

ただし、私が見ているように見えるすべての大きなWebサイトでは、div#nameよりも#nameを使用しています（スタックオーバーフローが含まれています）

実際、#name よりも div#name を使用している多くの Web サイトを見つけるのは非常に困難です。

私が見逃している #name を実行する利点はありますか? まだ知らない div#name で使用する理由はありますか?

score 4 · Accepted Answer

のdiv部分div#nameは必要ないため (IDページごとに固有であるため)、それを削除する CSS ファイルが小さくなります。CSS ファイルが小さいほど、HTTP リクエストとページの読み込み時間が速くなります。

また、NickC が指摘したようにdiv、スタイルルールを破ることなく、要素の HTML タグを変更できます。

score 3 · Accepted Answer

のような id#nameはページに一意である必要があるため、それ自体に要素を配置する理由はありません。ただし、div#name優先度が高くなり、必要な場合とそうでない場合があります。以下がの css をオーバーライドしないこのフィドルを参照してください。#namediv#name

score 3 · Accepted Answer

id セレクターに要素名を含めると実際には遅くなると思います。ブラウザーは通常、要素をすばやく検索するために id 属性を持つ要素をハッシュします。要素名を追加すると、速度が低下する可能性がある余分な手順が追加されます。

より強力なセレクターを作成する必要がある場合は、要素名と id を使用する理由の 1 つです。たとえば、次の基本スタイルシートがあります。

#titlebar {
     background-color: #fafafa;
}

ただし、いくつかのページでは、それらのページに固有のスタイルを持つ別のスタイルシートを含めます。ベーススタイルシートのスタイルをオーバーライドしたい場合は、セレクターを強化できます。

div#titlebar {
    background-color: #ffff00;
}

このセレクターはより具体的 (具体性が高い)であるため、基本スタイルを上書きします。

id で要素名を使用するもう 1 つの理由は、異なるページが同じ id に対して異なる要素を使用する場合です。たとえば、適切なリンクがない場合、リンクの代わりにスパンを使用します。

a#productId {
     color: #0000ff;
}
span#productId {
    color: #cccccc;
}

score 3 · Accepted Answer

ID はページ上で一意でなければならないため、遭遇するほとんどの ID はスタイルシートに 1 回しか表示されません。これを除外すると、スタイルシートの文字数も節約できます。これにより、1 日に何百万回もアクセスされる大規模なサイトでは、かなりの帯域幅が節約されます。

ID「名前」を持つ分割が ID「名前」を持つスパンとは異なるように見える場合に、要素名を含めることには利点があります (あるタイプのページに分割が表示され、別のタイプのページにスパンが表示される場合)。ページ）。ただし、これは非常にまれであり、これを行っているサイトに個人的に出くわしたことはありません. 通常、それらは異なる ID を使用するだけです。

要素名を含める方が速いのは事実ですが、 ID セレクターで要素名を含める場合と除外する場合の速度の違いは非常に小さいです。サイトがそれを除外することによって節約している帯域幅よりもはるかに小さい.

score 3 · Accepted Answer

コードの保守性と可読性の問題。

コードスタイルを宣言element#fooすると固定化されます。ドキュメントの構造を変更したり、要素の種類を置き換えたりする場合は、スタイルシートも変更する必要があります。

宣言すれば#foo、「関心の分離」と「KISS」の原則によりよく準拠できます。

もう 1 つの重要な問題は、CSS ファイルがいくつかの文字によって縮小されることです。これにより、大きなスタイルシートでは多くの文字が構築される可能性があります。

score 2 · Accepted Answer

#name のみを使用:

最初の明らかな利点は、HTML (テンプレートなど) を編集する人が、要素を変更することによって、知らないうちに CSS を壊さないことです。

すべての新しい HTML5 要素により、要素名はセマンティクスのみを目的として、はるかに互換性が高くなりました (たとえば、<div>a をよりセマンティックな<header>orに変更するなど<section>)。

div#name の使用:

「少し速いという理由で」とおっしゃいました。レンダリングエンジンの開発者自身の確固たる事実がなければ、私はこの仮定を立てることさえ躊躇します。

まず、エンジンは ID ごとに要素のハッシュテーブルを保存する可能性があります。つまり、より具体的な識別子を作成しても速度が向上する可能性は低いということです。

次に、さらに重要なことに、このような実装の詳細はブラウザーごとに異なり、いつでも変更される可能性があるため、たとえハードデータがあったとしても、それを開発に考慮に入れるべきではありません。

score 0 · Accepted Answer

CSS ファイルの方がコードが読みやすいので、div#name を使用します。

また、CSS を次のように構成します。

ul
{
    margin: 0;
    padding: 0;
}
ul.Home
{
    padding: 10px 0;
}
ul#Nav
{
    padding: 0 10px;
}

だから私は一般的なものから始めて、後でより具体的にしています。

それは私には理にかなっています。

score 0 · Accepted Answer

リンク div 名: http://jsfiddle.net/wWUU7/1/

CSS:

<style>
div[name=DIVNAME]{
color:green;
cursor:default;
font-weight:bold;
}

div[name=DIVNAME]:hover{
color:blue;
cursor:default;
font-weight:bold;
}
</style>

HTML:

<div name="DIVNAME">Hover This!</div>

Css セレクターのリスト: http://www.w3schools.com/cssref/css_selectors.asp

css - div#name と #name

8 に答える 8

Related

Reference