Best Practices für Markup/Style: Wie können Sie Stilregeln effizient über CSS-Klassen verteilen?

Question

Angenommen, ich habe eine HTML-Seite und eine entsprechende CSS-Datei. Ich möchte einigen Elementen abgerundete Ecken hinzufügen. Ich möchte Hintergrundfarben auf jedem anderen Abschnitt abwechseln. Ich möchte einen Hover-Status für jede Abschnittsüberschrift hinzufügen. So weiter und so fort - ich bleibe Styling und Styling und Styling.

Es kommt mir vor, dass es drei Extreme gibt, wo es das "Wer, Was, Wann, Wo, Warum und Wie" der Verteilung von CSS-Regeln über das Markup nach Klasse, ID und Hierarchie betrifft.

Extrem # 1: Jede Stilregel basiert auf einer ID.

Extrem # 2: Jede Stilregel basiert auf einer Klasse.

Extrem # 3: Jede Stilregel basiert auf der DOM-Hierarchie.

Offensichtlich würde das Zen der Front-End-Webentwicklung ein ausgewogenes Verhältnis zwischen Klassenwiederverwendung und eindeutigen Regeln im Vergleich zur Hierarchie bieten, da jedes der drei Extreme die Browserleistung, Wartbarkeit und Codegröße beeinträchtigen würde. Ich denke. Oder liege ich falsch? Wie kann ich feststellen, ob eine neue .class erforderlich ist, oder ob die anzuwendenden Stilregeln sicher sein können? Shoe-Horned in eine bestehende Definition? Wann sind zwei #id Regeln ähnlich genug, dass Sie gemeinsamen Code in eine Klasse herausziehen sollten? Wann "forkst" du eine Klasse (manchmal behältst du das Original und fügst Ableitungen für alle abweichenden Situationen hinzu ("Perkolate" in OOP-Termen), und andere Male schieben gemeinsame Regeln in jede der verschiedenen disjunkten Abweichungen - klar hängt dies ab von die Art (dh die Anzahl der Regeln) in der Abweichung selbst). Gibt es nur Umstände für die Verwendung rein hierarchischer Regeln?

Frage: Gibt es irgendwelche Faustregeln für diese Art von Debatte? Was ist Ihre Erfahrung und/oder Beratung? Gibt es gute Artikel, Ressourcen, Bücher, Vorträge (Bonuspunkte für "Tech-Talk" -Style-Videos) oder andere verfügbare Inhalte zum Thema? Ich möchte die Diskussion in ein paar wichtige Punkte geerdet halten (obwohl jeder Kommentar ist willkommen), in keiner bestimmten Reihenfolge:

• Wartbarkeit (einfache Lesen, Ändern und Hinzufügen von Code)
• DRY (Sie Repeat Yourself nicht)
• Zeiteffizienz (time-to-onload; progressive Rendering)
• Flächeneffizienz (Gesamtgröße der Auszeichnungs & zugeordnet Stile)

Answer 1

tun Sie sich selbst einen Gefallen, c huck out SASS.

Obwohl es Vor- und Nachteile gibt, Ihr CSS zu kompilieren, sind die Vorteile, die Sie durch das Vorhandensein von echten Variablen, Mix-Ins und Helfern in Ihrem vorkompilierten CSS haben, zumindest eine Überlegung wert.