css zusammenfassen welche Methode

.DeJaVu

Ich habe da eine allgemeine Frage zu Styles.

Wenn ich eine beachtliche Menge Styles, bei denen einige sich bestimmte Formatierungen gleichen, zusammenfassen möchte:

Hätte das Geschwindigkeitsvorteile?

Bsp:

CSS

#a{
margin:0 !important;
color: #123 !important;
}


#b{
margin:0 !important;
color: #321 !important;
}

Hätte ich Geschwindigkeitsvorteile mit dem folgenden?

CSS

#a, #b{
margin:0 !important;
}

#a{
color: #123 !important;
}


#b{
color: #321 !important;
}

Alles anzeigen

Im Inspektor sieht das gleich aus.

Sören Hentzschel

Wenn du durch das Zusammenfassen kleinere Dateien bekommst, erhältst du vielleicht einen theoretischen Performance-Vorteil dadurch. Praktisch ist das vernachlässigbar und hat seinen Vorteil viel mehr in der Organisation. Dein Beispiel ist minimal, aber du schreibst, dass du eine beachtliche Menge an Styles hast. Und da macht es in der Organisation schon was aus, ob du eine Änderung an einer oder an vielen Stellen vornehmen musst.

Für die Performance viel relevanter als die Frage nach dem Zusammenfassen ist die Auswahl deiner Selektoren. Einen guten Artikel dazu gibt es hier: https://csswizardry.com/2011/09/writin…-css-selectors/

milupo

Ich übertreibe mal einfach: Wenn ich 20 Selektoren zu einer Regel zusammenfasse, könnte ich mir vorstellen, dass da etwas die Übersicht verlorengeht, insofern wäre eine gewisse Aufteilung besser.

Sören Hentzschel

Das Beispiel von .DeJaVu hat ja vor allem damit zu tun, Regeln, die vielfach vorkommen, nicht unnötig zu wiederholen. Mit 20 solcher Regeln wird ein Zusammenfassen nur sinnvoller, denn dann geht es darum, ob man bei einer gewünschten Änderung einen Wert nur einmal oder 20 mal anpassen muss. Für die Wartbarkeit ist es immer am besten, wenn man an möglichst wenig Schrauben drehen muss.

.DeJaVu

Zitat von Sören Hentzschel

wenn man an möglichst wenig Schrauben drehen muss.

Das ist einer der Vorteile, die Konsolidierung auf nur wenige Stellen. Extrem wird es bei Elementen mit display: none, oder die Änderung einer Hintergrundfarbe in einer festen Tabelle, dann muss ich den Eintrag nur woanders reinschieben und nicht erst 1000 Zeilen nach unten scrollen, weil Farben ganz oben stehen. Ich habe den Code letztes Wochenende endlich fehlerfrei zusammenschieben können, irgendwie haben mir die zwei Programme immer Mist gebaut, entweder das eine, oder das andere. Und durch die Konsolidierung sind mir auch etliche Fehler aufgefallen. Spezielle Elemente (nicht weniger) belasse ich, wie erstellt, wenn ich die zerrupfe.

Es sind trotzdem 2000 Zeilen, kleiner wird es nur, wenn ich komprimiere, also Elemente nur eine Zeile, keine Leerzeichen usw.

Bei den Gelegenheiten konnte ich auch mein CSS auffrischen, so zB

a[id^="attachment"]

Und prompt ein paar Fehler gefunden...

Sören Hentzschel

Zitat von .DeJaVu

Es sind trotzdem 2000 Zeilen, kleiner wird es nur, wenn ich komprimiere, also Elemente nur eine Zeile, keine Leerzeichen usw.

Auf eine Minimierung würde ich verzichten. Das ist nicht viel CSS. Eine Website hat in der Regel deutlich mehr. Firefox kann damit also gut umgehen. Der Vorteil, den du bekommst, ist mit Glück mess-, aber sicher nicht spürbar. Und du erschwerst die Wartbarkeit extrem.

Es wäre etwas anderes, wenn du einen Präprozessor nutzen würdest. Sprich du schreibst alles in ihrer gewohnten und organisierten Form und lässt dann automatisiert alles minimieren. Dann hättest du die Vorteile guter Wartbarkeit und optimaler Performance vereint. Hast du so ein System eingerichtet, hast du dadurch keinen Mehraufwand. Aber wenn nicht, überwiegen die Nachteile.

.DeJaVu

Eben wegen der Übersichtlichkeit, es wird in Stylus genutzt und wenn ich mir da nen Kipparsch suchen muss weil komprimiert, ne danke. Die Konsolidierung war längst überfällig. Danke für die Hilfe, dann kann ich das so lassen.