Wenn CSS-Selektoren von #id stammen, müssen Sie sie umrahmen?

Question

Wenn ich eine Struktur wie diese:

<div id="main"> 
    <div id="sidebar"> 
    <div id="tag-cloud"/> 
    </div> 
</div> 

... was für CSS Best Practice ist:

#main #sidebar #tag-cloud { ... } 
#tag-cloud { ... } 

Oder wenn id='main' statt class='main' ist, wäre es noch schlimmer Umfang sein? Ich wundere mich nur, wenn Sie IDs haben, müssen Sie überhaupt Spielraum?

Answer 1

Hängt davon ab. Die meiste Zeit könnte man sagen:

#tag-cloud { ... } 

ist das beste (Leistung, siehe unten). Dieses:

#main #sidebar #tag-cloud { ... } 

macht nur eine Menge unnötiger Prüfungen, die Erfolg haben werden.

Es sei denn, wollen Sie dies tun:

#sidebar #tag-cloud { ... } 
#not-sidebar #tag-cloud { ... } 

in diesem Fall Scoping definiert ein anderes Aussehen, je nachdem wo #tag-cloud ist. Natürlich kann es nur eine #tag-cloud auf Ihrer Seite geben, aber Ihr CSS könnte in beiden Fällen trotzdem funktionieren.

---

CSS-Prüfungen werden von rechts nach links durchgeführt. Dies:

#main #sidebar #tag-cloud { ... } 

Wertet zu: „. Das Element mit der ID tag-cloud, die einen Elternteil mit ID hat sidebar, die einen Elternteil mit ID hat main Wenn das ist, wie Sie Ihre Website sowieso sieht, das ist nur eine ganze Menge nutzloser DOM-Traversal.

Nicht die Tatsache zu sprechen, dass mit über spezifische, überflüssig Scoping die ganze CSS in vielen Orten ändern müssen, wenn Sie Ihre Website-Struktur ändern, die irgendwie den Zweck entzieht.

Answer 2

Normalerweise sollten Sie keine ID-Kollisionen in Ihrem HTML-Dokument haben. Aus dieser Perspektive ist die Festlegung von IDs eine Zeitverschwendung.

Wenn Sie jedoch mehrere Elemente mit derselben ID falsch haben, müssen Sie möglicherweise das Scoping verwenden. Dies führt jedoch zu ungültigem HTML und kann andere unerwünschte Folgen haben und sollte daher vermieden werden.

Answer 3

IDs in einem Dokument eindeutig sein müssen, es sei denn, Sie aus irgendeinem Grund sind sie über mehrere Seiten zu teilen, wo #something auf einer anderen Seite in einem anderen Behälter eine ganz andere Sache kann, würde ich nur:

#tag-cloud { ... } 

Answer 4

Ich denke nicht, dass es viel Sinn macht, IDs zu scannen, aber ich bevorzuge es, alle meine anderen Selektoren auf eine ID beschränkt zu haben.

Vielleicht sollten Sie sich selbst fragen, ob Sie alle IDs benötigen oder ob einige Klassen oder gar nichts haben sollten. Weniger ist mehr.

Answer 5

IDs sollten sei einzigartig, also sollte Scoping sein unnötig sein.Eine gute Javascript-Engine verwendet diese IDs als Schlüssel, um ein Element schnell nach ID zu suchen, sodass das Scoping die Vorgänge verlangsamt.

Sie könnten jedoch ein ungültiges Dokument mit mehreren IDs haben. In diesem Fall wird durch das Scoping sichergestellt, dass Sie nicht mehrere Elemente unerwartet treffen. Aber in diesem Fall solltest du wirklich meine IDs reparieren.

Answer 6

Ich habe immer Spielraum. Sie können nur die eine tag-cloud auf dieser Seite haben, aber Sie können eine andere tag-cloud auf einem anderen Bereich Ihrer Website haben, die einen anderen Stil erfordert.

Persönlich unterlasse ich es, jemals IDs in meinem CSS zu verwenden. Sie sind restriktiv und können Probleme verursachen, wenn Ihre statische Site jemals in eine dynamische Website geändert wird, in der IDs erneut gerendert werden (z. B. ASP.NET).

Answer 7

Sie haben es schon selbst gesagt: IDs sind einzigartig. So fügt Scopes nur Unordnung hinzu. Aber wenn sie absichtlich für reine Dokumentationszwecke da wären, würde ich sie ersetzen, indem ich einfach die Regeln einrücke.

z. statt

#main { 
    /**/ 
} 

#main #sidebar { 
    /**/ 
} 

#main #sidebar #tag-cloud { 
    /**/ 
} 

tun

#main { 
    /**/ 
} 

    #sidebar { 
     /**/ 
    } 

     #tag-cloud { 
      /**/ 
     } 

Answer 8

Best Practice von id als Wrapper zu verwenden ist

<div id="main"><!--main wrapper--> 
    <div id="section"><!--section wrapper--> 
    <p>something</p> 
    </div> 
    <div id="sidebar"><!--sidebar wrapper--> 
    <div class="tag-cloud"> 
    </div> 

</div> 

seine besser Ihren Start zuletzt Id

#sidebar #tag-cloud { ... } 

AS Google Seite Geschwindigkeit Feuer Bug-Tool, die als Css-Selektor weniger Tiefe empfehlen

Answer 9

Nein, sollten Sie nicht Scope IDs, weil sie pro Seite eindeutig sein müssen. Wenn Sie mehrere Elemente haben, die dieselbe ID verwenden, wird Ihr HTML nicht validiert und es werden Probleme auftreten, wenn Sie versuchen, über Javascript auf das DOM zuzugreifen.

Zum Beispiel, wenn Sie mehrere IDs auf der Seite haben:

var myElements = document.getElementById('myduplicateid') 

Würde wieder das erste Element gefunden, dass abgestimmt, die nicht sein können das gewünschte Ergebnis.

, wenn Probleme sind mit mit für similiarly gruppierten Objekten mit ids kommen, empfehle ich so etwas wie dieses (Radio-Button Beispiel) tun

<input type = "radio" id = "my_radio:1" value = "1" name = "my_radio"> 
<input type = "radio" id = "my_radio:2" value = "2" name = "my_radio"> 

In Ihrem Javascript, würden Sie dann so etwas zu tun:

var my radio = document.getElementById('my_radio:1') 

Oder von Ihnen mit jQuery, so etwas wie diese:

var my radios = $('#my_radio\\:1') # Must escape colon with double slash since it's a special character in jQuery