2013-04-16 9 views
5

Ich weiß nicht, ob Verkettung der richtige Begriff ist.
ich reden wie diese über Codierung:CSS Verkettung Leistung

html > body > div > ul > li > a{ 
     /*css*/ 
    } 

ich mit einem Freund von mir gesprochen, der mir sagte, dass Codierung css wie dies auf dem Browser niedrigen perfomance wird geben, wenn die CSS-Rendering.
Also ist das wahr oder ich sollte wirklich nur Klassen/IDs deklarieren und auf ihnen angeben?

+3

Sie sollten ihn für jeden Beweis stellen – MarcinJuraszek

+0

Wenn der Umfang mehr ist, werden Sie durch Elemente viele dom iteriert werden. Eine gute Vorgehensweise besteht darin, einen Mindestumfang zu verwenden, z. B. nach Element-ID suchen. – dinukadev

+0

@Johnson - Ja! Er könnte ein Mann sein! ; o) – Paul

Antwort

1

Wenn Sie nur auf ein Element in einem bestimmten Element anwenden, können Sie so etwas wie dies versuchen. Wenn Sie noch tiefer gehen wollen, können Sie es wie so tun:

#ullID li a{ ... } 

Ich würde sagen, dies schnellere Leistung weise im Gegenteil sein wird, mit:

html > body > div > ul > li > a{ ... } 

this helps :)

Hier
3

Meiner Meinung nach sollten Sie die geringste Anzahl von Auswahlregeln verwenden. Je mehr Regeln, desto länger dauert die Verarbeitung.

Also ist es besser, Klassen und IDs zu verwenden.

Auch das Beispiel, das Sie oben gab, wenn Sie versuchen, die CSS auf alle Tags anwenden wird es mit nur

a { 
/* css */ 
} 
+0

Dies war nur ein Beispiel. Manchmal habe ich sehr großes CSS-es und wenn ich apllying nur eine Klasse ich bin immer ein wenig verwirrt und dann begann ich es so Codierung. Aber lassen Sie uns sagen, dass ich 3 ul-s in der Seite habe und jeder von ihnen hat einen anderen Stil. Ist es gut, sie ID-s und geben wie diese #ulID> li und #ulID> li einstellen> ein? –

7

Sie sollten nur als spezifisch gut funktionieren, wie Sie, um sein Ziel deine Elemente. Die Verwendung von ID ist vorzuziehen.

Schließlich - diese Art von Mikro-Optimierung ist ziemlich irrelevant. Nur lohnt einen Blick auf, wenn Sie so ziemlich optimieren alles sonst (Komprimieren von Bildern, von statischen Inhalten dient, CSS-Sprites verwenden, Vermögen usw. zu minimieren)

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

+0

+1 für die tatsächlichen Testdaten verknüpfen, anstatt wild wie alle anderen Antworten zu spekulieren. – RichieHindle

2

CSS gelesen vom Browser von rechts nach links, was bedeutet, dass der Browser in Ihrem Beispiel nach allen <a> und dann nach dem übergeordneten Element <li> sucht, bis er erreicht.

Also ja für die Leistung, ist dieser Stil der Schreibstile schlecht für die Leistung.

#ullID li{ ... } 

Auf diese Weise stellen Sie die Stile für die li-Tags innerhalb des #ullID Element:

1

ist eine grobe aproximation der Selektoren Optimierung:

  1. id (#myid)
  2. Klasse (.myclass)
  3. Tag (div, h1, p)
  4. Liste item
  5. benachbarte Geschwister (h1 + p)
  6. Liste item Kind (ul> li)
  7. Nachkomme (li a)
  8. universal (*) 9.attribute (a [rel = "external"])
  9. pseudo-Klasse und Pseudoelement (a: schweben, li: erst)

A Dies sind Dinge zu beachten, wenn Sie SEO sprechen. Das heißt nicht, dass Sie alle vergessen müssen und nur Classes und IDs verwenden müssen. Die Sache ist die, dass, wenn Ihre div #child ul li a img sagen, der Browser sucht zuerst nach und img und als Aussehen, wenn sie einen a Elternteil hat, der einen li Elternteil hat und so weiter.