Es besteht kein Zweifel daran, dass CSS eine große Rolle bei der Web-Performance spielt. Milica Mihajlija bringt auf den Punkt, warum genau
Wenn für eine Seite CSS verfügbar ist, sei es Inline-CSS oder ein externes Stylesheet, **verzögert der Browser das Rendern, bis das CSS geparst ist**. Dies liegt daran, dass Seiten ohne CSS oft unbrauchbar sind.
Der Browser *muss* warten, bis das CSS sowohl heruntergeladen als auch geparst ist, um uns das erste Rendering der Seite anzuzeigen, sonst wäre das Surfen im Web visuell extrem ruckelig. Wir würden wahrscheinlich JavaScript schreiben, um das Rendern von Seiten absichtlich zu verzögern, wenn das native Web so funktionieren würde.
Wie kann man es also verbessern? Klassiker wie Caching, Minifizierung und Komprimierung helfen. Aber auch, weniger davon zu versenden und nur den Teil zu laden, den man benötigt, und den Rest nach dem ersten Rendering.
Es geht nur darum, *wie* und *wie viel* CSS Sie laden, und hat sehr wenig mit dem Inhalt des CSS zu tun.
CSS ist eine Technologie, bei der jedes einzelne Byte zählt, denn bevor es geladen und geparst ist, passiert auf dem Bildschirm eigentlich Nichts, und jede Optimierung ist wichtig für die gesamte Benutzererfahrung.
Ich möchte teilen, wie ich Namenskonventionen für CSS-Klassennamen mit so wenigen Symbolen wie möglich verwende – aa, ab, ac, ad usw.
Mit 26 Buchstaben im Alphabet erhalten wir 676 Namen mit zwei Symbolen.
Wir können Zahlen und Kombinationen wie a0, a1, a2 hinzufügen, was uns weitere 260 Kombinationen für insgesamt 936 ergibt.
936 Klassennamen mit zwei Symbolen, und ich erwähne noch nicht einmal die Möglichkeit, Bindestriche (-) und Unterstriche (_) zu verwenden.
Mit drei Symbolen liefert diese Methode über 17.500 Klassennamen.
Nur eine Anmerkung – Sie müssen sich möglicher Kollisionen mit CSS-Frameworks bewusst sein – zum Beispiel verwendet Bootstrap 4 zwei Namen mit drei Symbolen – nav und btn.
Aber wie arbeite ich damit in meinem Entwicklungsprozess?
Ich setze kurze, aber aussagekräftige Zeilenkommentare über jede einzelne Klasse in meinen Arbeits-CSS-Dateien und erreiche so eine Trennung zwischen den eigentlichen CSS-Daten und den Metadaten, die die Dinge beschreiben.
Meine Arbeits-CSS-Dateien mit Tausenden von Codezeilen sind wie das „Airbus-Checklistenhandbuch“ für Piloten :).
Das einzige Wort, das sie beschreiben kann, ist – Kontext!
Mit einem Blick sehen Sie, wo Sie sich befinden und was genau hier passiert.
In dieser Situation denke ich Nie darüber nach, was jh, fv oder xr bedeuten.
Um den Überblick zu behalten, verwende ich in meinem Workflow eine Textdatei mit vordefinierten Klassennamen. Nacheinander greife ich sie, schneide sie aus und verwende den Namen in meiner CSS-Datei, und so bleibe ich immer auf dem Laufenden und weiß, was die nächste verfügbare Zwei- oder Drei-Symbol-Kombination ist.
Zusammenfassend hoffe ich wirklich, dass dies von so vielen Menschen wie möglich gefunden, gelesen und implementiert wird, denn die Performance-Auswirkungen sind ENORM, und denken wir zweimal nach, wenn Sie das nächste Mal daran denken, einen „menschenfreundlichen und lesbaren“ Klassennamen wie „home-wrapper-column-3-offset“ zu verwenden, der 14 Mal schwerer ist als meine Lösung!