div # name vs #name

Question

Ich weiß, dass in einem Stylesheet div # name und #name das gleiche tun. Persönlich habe ich div # name für die meisten Stile verwendet, mit der Begründung, dass es etwas schneller ist, und bedeutet, dass ich HTML-Elemente einfacher identifizieren kann, indem ich auf das CSS schaue.

jedoch alle großen Websites scheinen ich bei Verwendung #name über div # Namen suchen (Stack-Überlauf enthalten)

In der Tat bin ich es sehr schwierig zu finden, viele Websites auf all diese Verwendung div # zu finden Name über #name

Gibt es einen Vorteil, #name zu tun, die ich vermisse? Gibt es Gründe dafür, es über div # name zu benutzen, von dem ich noch nichts weiß?

Answer 1

Da IDs auf der Seite eindeutig sein müssen, würden die meisten IDs, die Sie verwenden, nur einmal in Ihrem Stylesheet erscheinen. Daher ist es sinnvoll, das Element, auf dem es angezeigt wird, nicht zu berücksichtigen. Wenn Sie es ausschließen, werden auch einige Zeichen in Ihrem Stylesheet gespeichert, was bei großen Websites, die millionen- und millionenfach am Tag besucht werden, ziemlich viel Bandbreite spart.

Es ist von Vorteil, den Elementnamen für den Fall einzubeziehen, dass eine Division mit der ID "name" anders aussieht als eine Span mit der ID "name" (wo eine Division auf einem Seitentyp und einer Spanne angezeigt wird) auf einer anderen Art von Seite). Das ist jedoch ziemlich selten, und ich bin nie persönlich auf eine Website gestoßen, die dies getan hat. Normalerweise verwenden sie nur unterschiedliche IDs für sie.

Es ist wahr, dass das Einschließen des Elementnamens schneller ist, aber der Geschwindigkeitsunterschied zwischen dem Einschließen und dem Ausschließen auf einem ID-Selektor ist sehr, sehr klein. Viel kleiner als die Bandbreite, die die Website durch Ausschließen speichert.

Answer 2

Da der div-Teil von nicht erforderlich ist (weil ID pro Seite eindeutig sind), werden kleinere CSS-Dateien entfernt. Kleinere CSS-Dateien bedeuten schnellere HTTP-Anforderungen und Seitenladezeiten.

Und wie NickC wies darauf hin, Mangel an div ermöglicht es, das HTML-Tag des Elements zu ändern, ohne die Stilregel zu brechen.

Answer 3

Mit #name nur:

Nun, die erste offensichtliche Vorteil wäre, dass eine Person, die Bearbeitung der HTML (Vorlage oder was auch immer) nicht CSS brechen, ohne es zu wissen, indem sie ein Element zu ändern.

Mit all den neuen HTML5-Elemente, Elementnamen haben viel mehr austauschbar für die Zwecke der Semantik allein werden (zum Beispiel ein <div> Wechsel eine semantische <header> oder <section> zu sein).

Mit div # Name:

sagte You "mit der Begründung, dass es etwas schneller". Ohne einige harte Fakten von den Rendering-Engine-Entwicklern selbst würde ich zögern, diese Annahme zu treffen.

Zunächst speichert die Engine wahrscheinlich eine Hash-Tabelle von Elementen nach ID. Das würde bedeuten, dass das Erstellen eines spezifischeren Identifikators wahrscheinlich keine Geschwindigkeitssteigerung hat.

Zweitens, und noch wichtiger, solche Implementierungsdetails variieren von Browser zu Browser und können sich jederzeit ändern. Selbst wenn Sie also harte Daten haben, sollten Sie sie wahrscheinlich nicht in Ihre Entwicklung einbeziehen.

Answer 4

eine Frage der Code Wartbarkeit und Lesbarkeit.

bei der Deklaration element#foo wird der Code-Stil starr - wenn man die Dokumentstruktur ändern oder Elementtypen ersetzen möchte, müsste man auch die Stylesheets ändern.

Wenn wir #foo deklarieren, werden wir besser den Prinzipien der "Trennung von Belangen" und "KISS" entsprechen.

Ein weiteres wichtiges Problem ist, dass die CSS-Dateien durch einige Zeichen verkleinert werden, die auf großen Stylesheets zu vielen Zeichen führen können.

Answer 5

Da eine ID wie #name eindeutig auf der Seite sein sollte, gibt es keinen Grund per se, das Element damit zu verbinden. div#name wird jedoch eine höhere Priorität haben, die (oder möglicherweise nicht) gewünscht werden. Siehe this fiddle, wobei die folgende #name die CSS von nicht überschreibt.

Answer 6

Ich benutze den div # Namen, weil der Code in der CSS-Datei besser lesbar ist.

ich meine CSS auch so strukturieren:

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

So generic Ich fange an und dann spezifischere später werden.

Es macht nur Sinn für mich.

Answer 7

Ich würde vermuten, dass einschließlich der Elementname in Ihrem ID-Selektor wäre eigentlich langsamer – Browser in der Regel Hash-Elemente mit ID-Attribute für schnellere Element nachschlagen. Das Hinzufügen des Elementnamens würde einen zusätzlichen Schritt hinzufügen, der möglicherweise die Geschwindigkeit verlangsamen könnte.

Ein Grund, warum Sie den Elementnamen mit ID verwenden möchten, ist, wenn Sie einen stärkeren Selektor erstellen müssen. Zum Beispiel haben Sie einen Basis-Stylesheet mit:

#titlebar { 
    background-color: #fafafa; 
} 

Aber auf ein paar Seiten, sind Sie ein anderes Stylesheet mit einigen Arten, die auf diesen Seiten sind einzigartig. Wenn Sie den Stil in der Basissheet außer Kraft setzen möchten, können Sie Ihre Wähler Rindfleisch:

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

Dieser Selektor spezifischer ist (hat eine höhere specificity), so wird es die Basis-Stil zu überschreiben.

Ein anderer Grund, den Sie Elementname mit ID verwenden möchten, wäre, wenn verschiedene Seiten ein anderes Element für die gleiche ID verwenden.Zum Beispiel eine Spanne statt einen Link zu verwenden, wenn es keinen entsprechenden Link:

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

Answer 8

Linking div Name: 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> 

Liste der CSS-Selektoren: http://www.w3schools.com/cssref/css_selectors.asp