2012-03-24 4 views
2

Nach CSS-Prinzipien, wenn wir die Wiederverwendbarkeit von Stilen implementieren möchten, sollten wir class Attribut verwenden und wenn wir wissen, dass es ein einzigartiges Element in der gesamten DOM-Struktur ist Wir sollten das Attribut id für dieses Element verwenden und dann einen Stil angeben.Unterschied zwischen der Verwendung von MULTIPLE 'ID' und 'Klasse' Attribute in HTML und CSS

Aber in dieser Ära der Web-Anwendungen kann DOM-Struktur zu komplex sein und es gibt eine Möglichkeit, doppelte id. Bestes Beispiel wäre #title. Seine Art von Name, die überall im Dokument erscheinen kann. Jetzt ist der beste Teil, wenn ich #title oder .title beim Definieren von Stilen verwende (vorausgesetzt, dass sie mehr als einmal erschienen sind und andere Eltern haben) Ausgabe, die CSS erzeugt, ist gleich. Diese jsfiddle hilft Ihnen zu verstehen, was ich meine http://jsfiddle.net/dewbot/LGAQD/

ich unter Eindruck war, die genau wie JS Renderer, CSS-Parser die Iteration stoppt, wenn es zuerst #title entdeckt aber es geschieht nicht, es auf Iteration hält, bis es EOF erreicht wie class . So stellt sich eine Frage, warum sollten wir mehrere class und nicht id verwenden?

Antwort

4

So entsteht eine Frage, warum sollten wir mehrere class und nicht id verwenden?

Because the HTML spec says so, und das Brechen der Regeln führt oft zu kaputten Code.

Ist es sinnvoll, identifizieren mehrere Elemente mit der gleichen ID? Ich denke nicht. Das ist, was Klassen sind: zu klassifizieren ähnliche Elemente.

Jetzt kommt der beste Teil ist, wenn ich #title oder .title verwenden, während die Definition Arten (vorausgesetzt, dass sie mehr als einmal und anderen Elternteil erschienen sind) ausgegeben, die CSS erzeugt gleiche ist.

Dies ist das natürliche Verhalten, und nicht um einen Fehler in allen Browsern, die dies tun per se. Es ist jedoch nicht die Art von Verhalten, auf die Sie sich verlassen sollten, da es sich um nicht konformes Markup handelt, das normalerweise schlecht ist.

Ich war unter Eindruck, wie JS Renderer, CSS-Parser die Iteration stoppt, wenn es zuerst #title entdeckt aber es geschieht nicht, es auf Iteration hält, bis es EOF wie class gerade erreicht.

Jetzt ist das falsch. CSS-Parser tun Selektor auf einer Pro-Element-Basis: Sie nehmen keine Regel und gehen durch das DOM, das es auf alle Elemente anwendet, die ihm entsprechen; Stattdessen nehmen sie jedes Element und versuchen, es mit so vielen Regeln wie möglich abzugleichen. Auf diese Weise weiß ein Parser nicht, ob eine ID bereits an anderer Stelle im Dokument verwendet wird, noch kümmert es. Es passt einfach nach dem, was das Element sagt, es ist. This answer deckt es genauer ab.

Solange ein Element eine bestimmte ID hat, muss es mit ID-Selektoren übereinstimmen, die nach dieser spezifischen ID suchen.Daher wird erwartet, dass Parser alle Elemente mit einer bestimmten ID einem einzelnen ID-Selektor zuordnen, obwohl es in HTML nicht korrekt ist, mehrere Elemente mit derselben ID zu haben. Mit anderen Worten, CSS erzwingt nicht die Eindeutigkeit von IDs, die für HTML erforderlich sind. This answer erklärt.

Mit allem, was gesagt wird, ist die Quintessenz: zuweisen Sie nur ein Element zu einer Zeit ID, und verwenden Sie Klassen zum Gruppieren mehrerer ähnlicher Elemente. Versuchen Sie nicht, clever zu sein und die Regeln zu verbiegen.

+0

_Hat es Sinn machen, Identifizieren mehrerer Elemente mit derselben ID_ wie ich sagte Komplexe DOM-Struktur. Wenn der Job eines Elements als Titel fungieren soll, hat es "id" als "title".Aber die Namenskonvention, die @Anubhav hier spezifiziert, ist was ich eigentlich wollte. Anyways diese Links sind gute liest. Große Hilfe! Danke –

+1

@debot: Es spielt keine Rolle, wie komplex es ist oder welche Namenskonventionen du verwendest. Es ist immer noch eine einzige DOM-Struktur und ** die Regeln sagen, dass eine ID nur einmal in einem einzelnen Dokument gleichzeitig erscheinen darf **. Daran fahre ich. – BoltClock

4

Ich denke, Sie haben das Parsing der CSS falsch. Der Browser geht nicht durch die CSS-Dateizeile für Zeile und wendet die Stile auf die Elemente in der HTML-Datei an, es ist umgekehrt. Der Browser analysiert den HTML-Code, und wenn er ein class oder id Attribut findet, wird in den CSS-Dateien nachgeschlagen. (Dies ist sehr vereinfacht, aber es hilft, den Punkt zu bekommen).

Nur weil der Browser es richtig darstellt, wenn Sie mehrere id s haben, bedeutet das nicht, dass Sie es tun sollten. Die standardclearly says, die die idhat, einzigartig zu sein.

1

Sie haben es selbst beantwortet.

CSS wendet es auf alle id s und class es es finden kann. Aber JS/jQuery wird es zum ersten Mal implementieren.

Also, Ihre Frage ist:

Muss ich bei gleichen id s zu viele Elemente für JS Manipulation? Antwort: Baaaaa .... D Entscheidung

Sollte ich die gleichen id 's auf viele Elemente für CSS anwenden? Antwort: immer noch schlecht, Entscheidung! aber implementiert diese Regeln von Ihnen

Sie sollten auch versuchen, CSS und JS-Regeln in hierarchischer Weise angewendet, so dass Sie nie falsch machen können. Wie, #Heading div#Title{css rules here} oder $('#Heading div#Titles')...jQuery rules here

Nächste Sache ist versuchen, Ids in einer konservativen Art und Weise zu implementieren.

Dann versuchen Sie, eine eindeutige ID für Element in Ihrer Website/App und nicht einzelne Seite bereitzustellen. Dies wird Sie vor mehrseitigen Skripten schützen, die Sie in Ihre Seiten einfügen.

zum Beispiel: Auf dem Weg an die Spitze der Homepage: #Home-Top-Heading

Hoffe, es hilft.

Verwandte Themen