CSS-Minimierung: Tipps und Tools

Das Erlernen des Schreibens von sauberem, optimiertem CSS erfordert viel Übung und den unbewussten, zwanghaften Wunsch, zu bereinigen. Beim Aufräumen Ihres CSS geht es nicht nur um Ihr verrücktes psychologisches Bedürfnis, sauber zu sein. Insbesondere bei größeren Websites führt es jedoch dazu, dass die Seiten schneller geladen werden. Schnellere Ladezeiten bedeuten eine verbesserte Benutzerfreundlichkeit und eine höhere Benutzerzufriedenheit.

Viele Menschen leiden unter Code-Hysterie. Das ist keine schlechte Sache.

In diesem Artikel werden Techniken zusammengefasst, mit denen Sie Ihr CSS optimieren können, sowie einige Online- und Desktop-Komprimierungstools, die Ihren Code automatisch komprimieren können.

Komprimieren oder nicht komprimieren

Bevor wir uns mit der Komprimierung von CSS befassen, ist es wichtig zu beachten, dass häufig ein Gleichgewicht zwischen Komprimierung und Codelesbarkeit besteht. Viele Programmierer sind stolz auf die saubere Organisation ihres CSS und möchten nicht, dass ihr Code einen Kompressor durchläuft, um Kommentare und Zeilenumbrüche zu entfernen. Als Designer sollten Sie die Ziele des von Ihnen geschriebenen Codes analysieren. Wenn Sie eine kleine Website erstellen, die nur wenige CSS-Zeilen benötigt, ist möglicherweise keine zusätzliche Komprimierung erforderlich. Wenn Sie Code schreiben, der mit einem offenen Team geteilt werden muss, können Sie Ihren Kollegen durch das Einfügen zusätzlicher Kommentare und Zeilenumbrüche ebenfalls viel Zeit sparen und sich ihren aufrichtigen Dank verdienen. Wenn Sie jedoch eine große Website entwerfen, die viel CSS erfordert, sollten Sie unbedingt auf die Dateigröße achten und diese so klein wie möglich halten.

Es kann einige Zeit dauern, die perfekte Kombination zwischen Komprimierung und Möglichkeit zu finden, aber es lohnt sich, beide zu erkunden, und ein Gleichgewicht zwischen ihnen kann Ihre Arbeit erheblich erleichtern. Gleichzeitig ist klar, dass eine Komprimierung nicht zwangsläufig zu einer Verschlechterung der Lesbarkeit führt. Es stehen viele Techniken zum Komprimieren von Code zur Verfügung, die zu einem besseren und besser organisierten Code führen.

Schauen wir uns vor diesem Hintergrund zunächst einige Techniken an, um CSS-Dateien auf ein Minimum zu beschränken.

Leere Stildefinition

Beginnen wir mit dem Offensichtlichen. Wenn Sie einen leeren Stil haben, verwerfen Sie ihn. Machen Sie keine Ausreden, dass Sie sie vielleicht später brauchen würden und Sie wissen, dass sie unordentlich sind. Fügen Sie sie nicht hinzu, es sei denn, Sie haben einen triftigen Grund.

Abkürzung

Die CSS-Abkürzung ist eine Möglichkeit, mehrere CSS-Zeilen in einer einzigen Zeile zusammenzufassen. Wenn Sie sich angewöhnen, alle Ihnen bekannten Abkürzungstricks anzuwenden, können Sie die Anzahl der Codezeilen, die Sie letztendlich schreiben müssen, erheblich reduzieren. Hier ist ein Beispiel:

Lange Version:

 #container {
    Polsterung oben : 5px
    padding-right : 10px
    Polsterung unten : 30px
    Polsterung links : 18px
}

Kurzfassung:

 #container {
    Polsterung : 5px 10px 30px 18px ;
}

Weitere Informationen zu CSS-Abkürzungen finden Sie in den folgenden Artikeln:

CSS-Sprites

Die ursprüngliche Idee hinter CSS-Sprites bestand darin, die Anzahl der HTTP-Anfragen zu reduzieren, um die Ladezeiten von Seiten zu beschleunigen. Sprite erreicht dieses Ziel, indem es mehrere Bilder in einer einzigen Bilddatei kombiniert, normalerweise einem rasterformatierten Bild. Jedes einzelne Bild wird angezeigt, indem die Hintergrundposition des größeren Sprite-Bildes geändert wird. Bei CSS-Code kann die Verwendung der Sprite-Technologie die Wiederverwendbarkeit und Wartbarkeit des Codes erheblich verbessern, wodurch die Menge an CSS-Code erheblich reduziert wird.

Um mehr über CSS-Sprites zu erfahren, schauen Sie sich Chris Coyiers Tutorial zu CSS-Tricks an:

Natürlich gibt es auch bei Front-End Observation einige wertvolle Artikel und Tipps zu CSS Sprites .

Kommentare reduzieren

Ich verwende gerne Kommentare in meinem Code. Je mehr Kommentare ich hinzufüge, desto schneller kann ich visuell durch verschiedene Teile des Codes navigieren. Wenn Sie jedoch hochoptimiertes CSS benötigen, das wenig Ressourcen verbraucht, verschlingen übermäßige Kommentare wertvolle Bytes. Versuchen Sie also, alle unnötigen Kommentare zu entfernen und diejenigen neu zu formatieren, die Sie behalten müssen, so dass sie so wenig Bytes wie möglich enthalten.

Angemessener Schriftart (Schriftfamilie)

Wenn die Dateigröße ein großes Problem darstellt, sollten Sie keine alternativen Schriftarten in Ihre Schriftartenfamilie aufnehmen. Befreien Sie sich von unnötigem Ballast und reduzieren Sie Ihre Zusatzoptionen auf ein oder zwei.

Vor:

 #container { Schriftfamilie : Palatino , Georgia , Times , Serifen }

nach:

 #container { Schriftfamilie : Palatino , Serife ;

In Bezug auf Schriftarten empfehle ich dringend die Lektüre von „ Three Talks about Web Default Fonts “ von Yu Bo. Mehrere der im Artikel erwähnten Artikel sind ebenfalls lesenswert und darüber nachzudenken.

Verwenden Sie hexadezimale Farbe

Um die Anzahl der Bytes zu reduzieren, werden alle RGB-Farbwerte in ihre entsprechenden Hexadezimalwerte umgewandelt. Das bedeutet zunächst vielleicht nicht viel, aber jedes Byte ist es wert!

Vor:

 #container { Farbe : rgb ( 131 , 100 , 219 ) }​

nach:

 #container { color : # 8364DB ;

Zeilenumbrüche entfernen

Gehen Sie jedes Stilattribut durch und entfernen Sie alle nicht benötigten harten Rückgaben. Sie können auch das letzte Semikolon entfernen.

Vor:

 #container {
    Rand : 5px ;
    Polsterung : 5px 10px 30px 18px ;
}

nach:

 #container { Rand : 5px ; Polsterung : 5px 10px 30px 18px }