2010-10-12 7 views
19

Ich habe in letzter Zeit eine ID auf das Body-Tag meiner HTML-Dokumente angewendet to allow greater CSS control (#9). Kürzlich fiel mir auf, dass ich genau das Gleiche machen könnte, indem ich eine Klasse auf das Body-Tag anwende. Ich möchte Positives und Negatives jeder Wahl wissen. Wenn ich mehrere Seiten habe, auf denen das Body-Tag dieselbe ID hat, ist es besser, eine Klasse zu verwenden? Was denken Sie? Warum?Klasse oder ID auf Body Tag

UPDATE: Die Klasse/ID ist im Wesentlichen, was ich verwenden möchte, um dem Stylesheet zu identifizieren, auf welche Seite oder welcher Seitentyp das Stylesheet angewendet wird. Zum Beispiel, ist es die Homepage, die Kontaktseite, eine von vielen Suchergebnisseiten, eine Archivseite, etc?

Antwort

18

Die Verwendung einer Klasse ist vollkommen akzeptabel, möglicherweise mehr als die Verwendung einer ID. Die Verwendung von IDs sollte so weit wie möglich eingeschränkt werden, da sie mit anderen IDs kollidieren und Dinge wie document.getElementById brechen können.

Ein ID-Selektor ist spezifischer als ein Klassenselektor, was ihn normalerweise zu einer besseren Wahl für Ihren Anwendungsfall macht. - David Dorward

jedoch eine hohe "specificness" ist nicht immer erwünscht. Betrachten Sie body#faq #col_b a {color:gray;} im Master-Stylesheet und dann jemand entwickelt ein Plugin mit einem grauen Hintergrund, der auf faq-Seite geht, jetzt müssen sie !important verwenden oder ein anderes ID-Attribut erstellen, um höhere Spezifität zu geben.

Bedenken Sie auch die Verwendung von mehreren Klassen in einem einzigen Körperelement:

<body class="faq two_column big_footer"> ... 
+0

Ihr Beispiel jemand ein Plugin zu entwickeln, wo die Stile abstürzen könnte, ist sehr wahrscheinlich, dass in dieser Situation passieren. Für mich scheint es, dass, wenn jemand den Regelkörper # faq #col_b a {color: grey;} geschrieben hat, Sie richtig sind, dass eine ID/Klasse möglicherweise angewendet werden müsste, um eine höhere Spezifität zu erhalten. Wenn Sie jedoch body.faq #col_b a {color: grey;} haben, scheint mir, dass eine ID/Klasse auch angewendet werden müsste, um eine höhere Spezifität zu erhalten. Kannst du mehr erklären, was der Unterschied zwischen diesen beiden Situationen ist? –

+0

Es gibt nicht viel Unterschied, wirklich ... Ich persönlich würde keine ID von col_b machen (für eine rechte Spalte in einem Seitenlayout, sagen wir), ich würde eine Klasse verwenden. Zwischen 'body # faq .col_b a' und' body.faq .col_b a' sollte die Sekunde viel einfacher für jemand anderen sein, um zu überschreiben. Im Allgemeinen denke ich, wenn Sie CSS erstellen, auf dem andere aufbauen können, ist eine hohe Spezifität (wenn es so genannt wird) eine schlechte Sache, wenn eine geringere Spezifität dasselbe erreichen kann. –

+0

Gute Argumentation. Wenn andere auf Ihrem CSS aufbauen, verwenden Sie immer die niedrigste Spezifität, die notwendig ist, um die gewünschten Ergebnisse zu erzielen. –

2

ID muss pro Seite eindeutig sein (wenn Sie gültige Markup wollen), sollte nur eine Instanz einer bestimmten ID Bedeutung existieren auf einer Seite.

Klassen dagegen können auf zahlreiche Elemente pro Seite angewendet werden. Verwenden Sie Klassen für Dinge, die dieselben Stile wiederverwenden, und verwenden Sie IDs für eindeutigere Elemente, die ihr eigenes Styling benötigen.

Verwenden Sie im Idealfall möglichst Klassen und beschränken Sie die Verwendung von IDs.

Weitere Informationen zur ID finden Sie unter here. Weitere Informationen zu Klassen finden Sie unter here.

+0

Danke. Ich habe schon auf w3schools nachgelesen. Ich könnte entweder Klasse oder ID in meiner Situation verwenden und es wäre akzeptabel. Ich bemühe mich jedoch, mögliche positive/negative Aspekte der Verwendung von einem über den anderen auszuprobieren. –

+0

In diesem Fall gibt es wirklich keine signifikanten Auswirkungen, solange, was Sie für sie verwenden, ist semantisch korrekt. –

+1

Bitte verlinken Sie nicht zu W3Schools - [sie sind häufig ungenau und nicht mit dem W3C verbunden] (http://w3fools.com/). – iono

1

Es ist besser, eine Klasse zu verwenden, wenn Sie einen Stil in Seiten wiederverwenden möchten. IDs sind gut, wenn das Stylesheet für eine bestimmte Seite entworfen wurde. Aber das hängt immer noch von deiner App ab.

0

Sie können (lesen: sollten) nur die ID auf dem Body-Tag verwenden.

ID = Einzelnutzung pro Seite

Class = multiple verwendet

1 Körper tag = 1 ID-Tag. Dies kann auf verschiedenen Seiten gleich sein. Im Wesentlichen ist die Verwendung des Klassen-Tags wahrscheinlich zu diesem Zweck übertrieben.

4

Ein ID-Selektor ist mehr specific als ein Klassenselektor, der es normalerweise eine bessere Wahl für Ihren Anwendungsfall macht.

0

In HTML5 kann das ID-Attribut für jedes HTML-Element verwendet werden (es wird für jedes HTML-Element validiert. Es ist jedoch nicht unbedingt nützlich).<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Hinweis: HTML 4.01 hat über den Inhalt der ID-Werte größer Einschränkungen (zum Beispiel, in HTML 4.01 ID-Werte können nicht mit einer Zahl beginnen)

In HTML 4.01 kann das id-Attribut nicht verwendet werden.

Quelle: W3School