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 haben Code-Fetische. 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 aus Komprimierung und Möglichkeiten 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{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}Kurzfassung:
#container{padding: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{font-family:Palatino,Georgia,Times,serif;}nach:
#container{font-family:Palatino,serif;}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 lesens- und nachdenkenswert.
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{color: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{margin:5px;padding:5px 10px 30px 18px;}nach:
#container{margin:5px;padding:5px 10px 30px 18px}10 Online-CSS-Komprimierungstools
CSS-Minifier können einen Großteil der Arbeit zur Bereinigung Ihres Codes automatisieren. Viele von ihnen sagen Ihnen, wie viel Prozent Ihrer Dateien komprimiert sind. Probieren Sie also einige aus, um herauszufinden, welches am besten geeignet ist.
CSS-Laufwerk
Optionen:
Komprimierungsmodus: niedrige, normale, hohe Komprimierung
Kommentarkomprimierung: keine Komprimierung, alle oder länger als ein bestimmter Wert.
CSS-Kompressor
Optionale Optionen (Sie können jeweils Ja oder Nein wählen):
Attribute neu anordnen
Farbe komprimieren
Schriftstärke komprimieren
Auswahl für Kleinbuchstaben
Entfernen Sie unnötigen Platz
Entfernen Sie unnötige Semikolons
Arantius
Optionale Optionen (Sie können jeweils Ja oder Nein wählen):
Kommentare entfernen
Entfernen Sie Kommentare, die mindestens x Bytes lang sind
Eine Regel pro Zeile