7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Grundlegendes zu CSS-Statistiken: Wie man die Zahlen optimal nutzen kann

Read Time: 11 mins

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Falls Sie es nicht bemerkt haben, wurde die CSS-Analyseseite cssstats.com kürzlich überarbeitet. Es ist ein wunderschön gestaltetes Tool, mit dem Sie viele objektive Einblicke in Ihren Code erhalten. Wie können Sie CSS-Statistiken jedoch optimal nutzen? Wofür machen Sie das? Was bedeuten sie und wie können Sie sie täglich verwenden?

Heute werden wir über Best Practices, Spezifität und Wartbarkeit von CSS sprechen. Außerdem erfahren Sie, wie Sie CSS-Statistiken richtig interpretieren und besser nutzen können. Lass uns eintauchen!

Kurzanleitung zu CSS-Statistiken

Gehen Sie zu cssstats.com, geben Sie entweder die URL Ihrer Website oder deren Stylesheet ein oder fügen Sie das rohe CSS direkt in den Textbereich unten ein und klicken Sie auf Go.

Nach dem Analysieren erhalten Sie eine Menge Statistiken über das CSS. Aus der Anzahl der verwendeten Regeln, ihrer durchschnittlichen Größe, Aufschlüsselungen der einzelnen Deklarationstypen, Schrift- und Hintergrundfarben, Schriftfamilien und -größen sowie Spezifitätsdiagrammen.

Das bietet Ihnen CSS Stats. Schauen wir uns nun an, was wir mit allen Daten tun können.

Fokus auf Wartbarkeit

Als Front-End-Entwickler sind wir ständig um Leistung und Benutzererfahrung besorgt. Wir sind auch für die Erstellung von Software verantwortlich, aber das Wort "Software" ist vielen Front-End-Entwicklern mit Designhintergrund fremd. Es ist oft einfach, Best Practices zu ignorieren, wenn wir unser CSS codieren.

Die Wahrheit ist jedoch, dass die Front-End-Entwicklung wie jede andere Softwareentwicklung die Konzentration auf Best Practices erfordert. Die Regeln für Best Practices werden im Internet ausführlich diskutiert. In diesem Artikel werden wir uns jedoch mit der wohl wichtigsten Vorgehensweise in Bezug auf CSS befassen: der Wartbarkeit.

Die Wartbarkeit von CSS konzentriert sich auf viele verschiedene Facetten.

  • Wie einfach können Sie ein bestimmtes Modul entwerfen?
  • Wie einfach können Sie eine modifizierte Version dieses Moduls entwerfen?
  • Kann ein neuer Entwickler die von Ihrem CSS verwendeten Systeme umfassend verstehen?
  • Ist Ihr CSS vorhersehbar, konsistent und organisiert?
  • Verlassen Sie sich auf einen Präprozessor (oder ein anderes Tool), um die Entwicklung und Segmentierung flexibler zu gestalten?
  • Wiederholen Sie sich oft?
  • Verwenden Sie zuvor festgelegte Namens- und Stilkonventionen?

Wir werden nicht auf jedes dieser Elemente einzeln eingehen, aber wenn wir über die Wartbarkeit sprechen, wirkt sich jede dieser Überlegungen auf die allgemeine Wartbarkeit Ihrer Codebasis aus.

Was sagen Ihnen diese Statistiken über die Wartbarkeit?

Die ehrliche Antwort? Nichts, unbedingt. Sie lernen nichts über die Wartbarkeit, indem Sie sich einfach die CSS-Statistiken ansehen. Sie müssen auch den Kontext dieses bestimmten CSS sowie den Kontext der aktiven Entwicklung verstehen.

Die erste Möglichkeit, Ihre CSS-Statistiken zu analysieren, besteht darin, nach Anzeichen von CSS-Aufblähung zu suchen.

Aufblähen

Mit Aufblähen meinen wir unbenutztes, redundantes oder anderweitig unnötiges CSS.

In welchem Umfang wird das CSS geladen?

Nehmen wir zum Beispiel eine einseitige Anwendung mit fünf verschiedenen Inhaltsmodulen. Welche Arten von CSS-Statistiken würden Sie von einer einzelnen Seite erwarten? Eine typische einseitige Anwendung kann einen Bruchteil der Anzahl der CSS-Regeln und möglicherweise die Hälfte der Anzahl der Farbdeklarationen als große Website für Nachrichtenveröffentlichungen oder als facettenreiche SAAS-Anwendung enthalten.

Wenn Sie eine enorme Anzahl von Selektoren sehen (z. B. wenn Ihre einfache Website mit nur einer Seite so viel CSS enthält wie ein Webframework wie Bootstrap, das mit knapp 2400 Selektoren arbeitet), ist es wahrscheinlich, dass Sie irgendwo einen Fehler gemacht haben. Wenn Sie in 30 Schriftgrößen laden und Ihr Design 10 Schriftarten erfordert, haben Sie wahrscheinlich nicht verwendete, aufgeblähte oder möglicherweise inkonsistente Stile.

Eine mögliche Ausnahme von dieser Regel in Bezug auf die Wartbarkeit besteht darin, dass Sie tatsächlich Bootstrap oder ein anderes beliebtes, gut dokumentiertes Framework verwenden. Da die Dokumentation zu diesen Projekten relativ umfangreich ist und die Nutzung das Web überfüllt hat, pflegen Front-End-Entwickler Bootstrap nicht unbedingt, solange die primäre Quelle die Kernimplementierungen von Bootstrap beibehält. Wenn Sie das Bootstrap-Framework jedoch nur für das Raster oder einige Elemente der Benutzeroberfläche einbinden, sollten Sie stattdessen eine angepasste Version erstellen, die nicht das zusätzliche CSS enthält, das Sie nie verwenden möchten.

Welche Arten von Seiten wird auf der Website geladen?

Möglicherweise führt Ihre Anwendung etwas aus, das eine große Anzahl von Selektoren, Farben oder Schriftgrößen erfordert. Wenn Sie beispielsweise einen Online-Shop betreiben, der Produktfarben verwendet, kann es sein, dass eine große Anzahl von Farben in Ihrem CSS angezeigt wird und ein völlig legitimer Fall ist. Ein weiteres Beispiel ist, wenn Sie eine Site ausführen, auf der Benutzer aus einer Liste von Schriftgrößen und Schriftarten für den von ihnen erstellten Inhalt auswählen können. In diesen Beispielen ist es sinnvoll, große Zahlen in diesen bestimmten Kategorien zu sehen.

medium font sizemedium font sizemedium font size
Medium.com verwendet irgendwo eine Schriftgröße von 301px.

Wenn Sie jedoch beispielsweise ein Blog mit einem eingeschränkten Farbschema erstellen, sollten Ihre CSS-Statistiken die Anzahl der Farben und die Anzahl der Schriftdeklarationen widerspiegeln.

Redundanz zwischen Regeln

Definieren Sie in Ihrem CSS zwanzigmal dieselbe Schriftgröße? Sehr oft kann dies vermieden werden und ist in der Regel auf mangelnde Planung zurückzuführen. Wenn Sie Ihre Schriftgrößen bestimmen, bevor Sie ein anderes CSS schreiben, können Sie diese Größen leichter auf den Rest des Systems anwenden.

Gleiches gilt für jeden wiederholten Stil; Wenn Sie feststellen, dass Sie dasselbe mehrmals schreiben, verdient dieser Satz von Stilen möglicherweise eine eigene Präsentations- oder Semantikklasse oder eine andere modulare Definition?

Gehen Sie hier nicht über Bord. Das Neudefinieren einiger Schriftgrößen oder Hintergrundfarben ist keine große Sache. Wenn Sie jedoch mehrere Stile in sehr ähnlichen Modulen mehrmals neu definieren, sollten Sie möglicherweise eine Basisklasse erweitern. Wenn Sie beispielsweise eine Schaltflächenklasse haben:

Angenommen, Sie möchten eine blaue Version derselben Schaltfläche. Wie sollten Sie das definieren? Wenn Sie dieselbe btn-Klasse neu definieren, sieht sie ungefähr so aus:

Natürlich gibt es dabei viele Probleme. Erstens verstößt es gegen das DRY-Prinzip (wiederholen Sie sich nicht). Aber warum ist das wichtig? Wartbarkeit. Nehmen wir zum Beispiel an, das Design ändert sich und erfordert eine kleinere Schriftart auf den Schaltflächen. Sie müssen dann in die Klassen .btn und .btn-blue wechseln, um die Schriftgröße zu ändern. Noch komplizierter wird es, wenn Sie Varianten der blauen und normalen grauen Schaltflächen benötigen, z. B. eine Version mit blauem Umriss. Alle Ihre Änderungen an einer Schaltfläche müssen an vielen Schaltflächen vorgenommen werden.

Das ist unglaublich ineffizient. Stattdessen sollten Sie die Tatsache nutzen, dass Klassen modular aufgebaut sind, und es Ihnen ermöglichen, Schaltflächenstile zu definieren, die Ihre Basis-.btn-Klasse erweitern.

Aha! Und jetzt haben wir eine viel wartbarere Lösung, die auch eine erhebliche Anzahl von CSS-Zeilen entfernt und dem DRY-Prinzip folgt.

Spezifität

Die Spezifität ist eine der schwer verständlichen dunklen Ecken von CSS, die selbst die erfahrensten Entwickler häufig stört. In den CSS-Statistiken sehen Sie eine Spezifitätstabelle, die zeigt, wie spezifisch die Selektoren in Ihrem CSS sind und wo diese Selektoren angezeigt werden.

BBC specificityBBC specificityBBC specificity
CSS-Spezifität von der BBC-Website

Diese Grafik zeigt die Spezifität von Selektoren, wie sie im CSS von bbc.co.uk angetroffen werden. Stellen Sie sich vor, die linke Seite des Diagramms befindet sich oben im Stylesheet und bewegt sich dann entlang der x-Achse, während das Stylesheet gelesen wird. Je spezifischer die Regel ist, desto höher ist die dunkelblaue Linie auf der y-Achse.

Spezifische Faustregeln

Wir werden zunächst drei allgemeine "Faustregeln" bereitstellen und dann die Regeln erläutern.

  1. Gehen Sie von weniger spezifisch zu spezifischer
  2. Schießen Sie für die niedrigstmögliche durchschnittliche Spezifität
  3. Reduzieren Sie die Peaks in Ihrem Diagramm

Wir werden uns eingehender mit diesen Themen befassen, aber lassen Sie uns zunächst ein wenig darüber sprechen, wie die Spezifität funktioniert.

CSS-Selektoren erhalten eine Spezifitätsbewertung, um die Browser-Rendering-Engine darüber zu informieren, welche Regeln für welche Elemente gelten. Der Grund, warum dies erforderlich ist, ist auch der Grund, warum CSS so leistungsfähig ist: Stile können in CSS vererbt und kaskadiert werden. Dies bedeutet, dass Sie mehr als einen Satz von Stilen auf ein bestimmtes Element anwenden können. Die Rendering-Engine muss alle diese Regeln konsolidieren und etwas präsentieren. Was passiert jedoch, wenn zwei verschiedene Werte für dieselbe Stildeklaration festgelegt werden? Beispielsweise:

Wenn die CSS-Engine auf ein <a>-Tag mit einer button-Klasse stößt, muss festgelegt werden, ob das color-Attribut #fff, #000 oder die Standardeinstellung des Browsers sein soll. Die CSS-Spezifität ist der Regelsatz, den der Browser verwendet, um diese Bestimmung vorzunehmen.

Punkte

Wie funktioniert die Spezifität? Verwenden Sie dieses Bewertungssystem als Leitfaden, der direkt aus CSS-Tricks stammt:

  • Elementselektoren und Pseudoelemente erhalten 1 Punkt.
  • Klassenselektoren und Pseudoklassen erhalten 1,0 Punkte.
  • ID-Selektoren erhalten 1,0,0 Punkte.
  • Inline-Stile erhalten 1,0,0,0 Punkte.
  • !important übertrumpft sie alle
  • * Selektoren erhalten eine Spezifitätsbewertung aller Nullen.

Beachten Sie, dass in diesem Bewertungssystem, wenn etwas über 10 geht, es nicht in die nächste Spalte geht. Wenn Sie also beispielsweise einen Selektor mit 11 Elementen haben, wird es nicht auf eine Spezifität von 0 übertragen. 0,1,1. Es wäre stattdessen 0,0,0,11.

Hier sind einige Selektoren und die daraus resultierenden Ergebnisse.

Okay - jetzt, da wir eine grundlegende Einführung für die CSS-Spezifität haben, wie sollte dies unseren Code beeinflussen? Kehren wir zu unseren drei Faustregeln für die CSS-Spezifität zurück.

#1 Wechseln Sie von weniger spezifisch zu spezifischer

Diese Regel besagt im Wesentlichen, dass allgemeine Selektoren am Anfang Ihres CSS stehen sollten und spezifischere Selektoren später in Ihrem CSS erscheinen sollten. Die Gründe für diese Regel sind vielfältig.

Erstens legt das Platzieren allgemeiner Regeln am Anfang Ihrer Anwendung normalerweise die Bühne in Ihrem Code für die Erstellung von Basismodulen fest. In Verbindung mit #2 stellt das Vorhandensein der am wenigsten spezifischen Stile am Anfang sicher, dass Sie zuerst mit der geringstmöglichen Spezifität schreiben. Später, wenn sich Ihr Code weiterentwickelt, kann das Hinzufügen spezifischerer Stile erforderlich werden, um vorherige Stile zu überschreiben oder zu erweitern.

apple css specificityapple css specificityapple css specificity
Stile auf der Apple-Website sind zu Beginn des Stylesheets sehr spezifisch
pure css specificitypure css specificitypure css specificity
Die Spezifität des Pure CSS-Frameworks nimmt im Allgemeinen gegen Ende des Stylesheets zu

Dies führt zu unserem zweiten Punkt: Was passiert, wenn die CSS-Rendering-Engine auf zwei Selektoren mit derselben Punktzahl trifft? Es muss sich noch entscheiden, also wird es sich für die letztere der beiden Regeln entscheiden. Indem Sie am Anfang Ihrer Datei einen Fehler machen, stellen Sie sicher, dass Ihre Spezifitätsüberschreibungen spezifischer sind, wenn Sie später in die Datei gehen. Dies bedeutet, dass eine einzelne Klasse später in der Datei als in der Lage angesehen werden sollte, einzelne Klassen früher in der Datei zu überschreiben.

Diese Vorgehensweise stellt sicher, dass die spätere Entwicklung desselben Projekts das Kaskadensystem schnell verstehen kann.

#2 Schießen Sie für die niedrigstmögliche durchschnittliche Spezifität

Wenn Sie lange Zeit ein Front-End-Entwickler waren, haben Sie wahrscheinlich den "CSS-Spezifitätskrieg" erlebt. Sie schreiben eine Auswahl und einige Regeln und aktualisieren den Browser nur, um festzustellen, dass die Änderungen nicht übernommen wurden. Sie wissen aus früheren Projekten oder aus Gesprächen über die Spezifität, dass dies daran liegt, dass Ihr Selektor nicht spezifisch genug ist. Anstatt also zu versuchen, das Problem auf den zu spezifischen Selektor zurückzuführen, entscheiden Sie sich, den neuen spezifischer zu gestalten. Sie fügen ein oder zwei Ausweise hinzu, und wenn dies nicht ausreicht, werfen Sie einfach !important darauf. Und voila - deine Stile zeigen sich.

Dieser Ansatz funktioniert technisch gesehen; Leider müssen Sie die Komplexität jedes Mal, wenn Sie diesen Stil erweitern möchten, weiter erhöhen. Bevor Sie dies wissen, sind Ihre Selektoren äußerst spezifisch und Sie müssen Code wiederholen, anstatt Klassen einfach wiederzuverwenden. Darüber hinaus ist es nahezu unmöglich, genau zu bestimmen, welchen Grad an Spezifität neue Stile haben sollten, ohne immer mehr IDs und !important Deklarationen hinzuzufügen.

Wenn Sie Ihre Selektoren weniger spezifisch halten, ist dies eine viel vernünftigere und wartbarere Methode, um mit Ihrem CSS umzugehen.

Ein paar Pro-Tipps:

  • Bevorzugen Sie standardmäßig Klassen gegenüber IDs. Diese Praxis löst die meisten Spezifitätsprobleme in einem Schritt.
  • Verschachteln Sie Ihre Selektoren nicht weiter als drei oder vier Ebenen tief und stellen Sie sicher, dass Sie verschachteln müssen. Die Verschachtelung sollte nur beim Erweitern einer zuvor definierten Klasse erfolgen und nicht ausschließlich für die Codeorganisation verwendet werden. Das Verschachteln kann verwendet werden, um Ihre Klassendefinitionen zukunftssicher zu machen. Wiederverwendbare Klassen sollten jedoch nach Möglichkeit verwendet werden.

#3 Reduzieren Sie die Peaks in Ihrem Diagramm

Diese Regel ist in erster Linie vorhanden, um seltsam platzierte Regeln zu vermeiden. Wenn Sie beispielsweise einige Klassen für die Textpräsentation definieren und plötzlich eine Regel haben, die sechs Klassen und eine ID verschachtelt, sollte diese bestimmte Regel kontextbezogen mit spezifischeren Selektoren platziert werden, auf die sie sich bezieht.

Abschluss

Mit CSS-Statistiken erhalten Sie einen Einblick in die Art und Weise, wie Ihr CSS geschrieben wird. Dies ist jedoch nur dann hilfreich, wenn Sie eine Vorstellung davon haben, wie diese Statistiken aussehen sollten, bevor Sie versuchen, sie zu analysieren. Dies bedeutet, dass Sie ein tiefes kontextbezogenes Verständnis dafür haben, wie Ihr CSS geschrieben ist und warum. Wenn Ihr CSS wartbar und für die Site geeignet ist, auf der es verwendet wird, sind die Statistiken dieses CSS nicht Grund genug, Ihren Code umzugestalten.

Anstatt die Zahlenregeln blind zu befolgen, sollten Sie sich als verantwortungsbewusster Front-End-Entwickler darauf konzentrieren, Ihren Code wartbar zu machen und das Aufblähen zu reduzieren. Statistiken über Ihren Code können Ihnen helfen, Problembereiche zu finden, aber sie können nur so weit gehen.

Weiterführende Literatur

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.