Was ist eine bessere Möglichkeit, CSS-Stile festzulegen?

Question

Beispiel Sie müssen eine Reihe von Elementen schweben.

Option 1 - Kettenelemente

#elm1, #elm2, #elm3, #elm4 {float:left} 

Option 2 - Fügen Sie eine ähnliche Klasse Elemente

.float {float:left} 

Option 3 - Add Stil Klasse individuell

#elm1{float:left} 
#elm2{float:left} 
#elm3{float:left} 
#elm4{float:left} 

I 1 bevorzugen aber ich weiß nicht, wie viel Geschwindigkeit es hat, gibt es noch andere Möglichkeiten? Was ist die Konvention dafür?

Answer 1

Die meisten CSS-Minimizer und "Reiniger" werden Ihre erste Option tun. Meiner Meinung nach ist es viel besser, als eine neue Klasse zu erstellen, die nur für Stil zu einer Reihe von Elementen hinzugefügt wird, und es ist eine Million Mal besser als deine letzte Option.

In CSS, wenn es bereits eine ID oder eine Klasse hat, können Sie Stil anwenden. Also, Option 1 zu Option 2 vergleichen, sollte Option 1 die bessere Wahl sein. Sie müssen nicht durch Ihren Code zurückgehen und Klassen zu Elementen hinzufügen, die bereits IDs haben, und Sie müssen nicht zwischen der ID und der Klasse für das gleiche Element in Ihrem Stylesheet jonglieren.

Answer 2

Was die Geschwindigkeit angeht, glaube ich nicht, dass es einen großen Unterschied zwischen den 3 Optionen gibt. Ich denke, es ist eher eine Frage der Wartbarkeit. Es scheint, als wäre Option 1 am einfachsten zu halten, was die Optionen angeht.

Answer 3

http://css-tricks.com/efficiently-rendering-css/ Scheint, dass IDs am effizientesten sind, obwohl IMHO ich denke, dass die Klasse sauberer ist und genauer darstellt, was Sie auszudrücken versuchen.

Aus Artikeln Googles @http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

„einen universellen Schlüsselschalter vermeiden. Lassen Sie Elemente von den Vorfahren erben, oder eine Klasse verwenden, um einen Stil, um mehrere Elemente zu übernehmen.“

Also, ich denke, Best Practices sagt, verwenden Sie eine Klasse. Es ist sauber und lesbar IMHO.

Answer 4

Es gibt bestimmte Kompromisse. Im Allgemeinen wird angenommen, dass alles ID-basierte schneller ist, insbesondere wenn die Seiten schwerer werden. Auf der anderen Seite glauben http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/ und ähnliche Artikel Autoren, dass die Verwendung von Klassen für gemeinsame Regeln sinnvoll ist und sollte verwendet werden. Der Geschwindigkeitsunterschied ist oft vernachlässigbar und sorgfältig verwendete Klassen machen die Pflege und Aktualisierung des Designs viel einfacher.

Answer 5

Verwenden Sie die Option zwei (Klassen) für die globalen Fälle. Das ist, was Klassenselektoren tun sollen.

Verwenden Sie die ID zum Formatieren spezifischer Unterschiede. Dies ist, was ID-Selektoren tun sollen.

.myclass { 
     float:left; 
     height:10px; 
    } 

    #elem2 { 
    height:69px; 
    color:#ABCDEF; 
    } 

Answer 6

Der ganze Zweck von CSS ist HTML aus Präsentation zu befreien. Daher ist der semantische Ansatz immer der gute. Wenn Sie .float { float:left } verwenden, können Sie auch style="float:left" verwenden.(okay, das ist eine Übertreibung, aber der Punkt ist, dass je weniger Stilklassen Sie verwenden desto besser die Trennung zwischen Präsentation und Informationen)

Wie bereits erwähnt, ist der beste Ansatz, semantisch identifizieren und klassifizieren Sie Ihren HTML-Code und dann verwenden DOM-Beziehungen

#elements { 
    float:left; 
} 
    #elements li { 
     color:#ABCDEF 
    } 
    #elements li.odd { 
     color:#123456 
    }