Um sauberes, optimiertes CSS schreiben zu können, ist viel Übung und ein unaufhaltsames Bedürfnis nach Sauberkeit erforderlich. Wenn Sie Ihr CSS ordentlich halten, ist es nicht alles, was Sie brauchen, um Ihren verrückten psychologischen Bedarf an Sauberkeit zu decken. Kürzere Ladezeiten bedeuten erhöhte Benutzerfreundlichkeit und höhere Benutzerzufriedenheit.
In diesem Beitrag werden verschiedene Techniken untersucht, mit denen Sie Ihr CSS optimieren können, sowie mehrere Online-Tools, die Ihren Code automatisch komprimieren können.
Komprimieren oder nicht komprimieren
Bevor wir uns mit dem Komprimieren von CSS beschäftigen, sollte beachtet werden, dass häufig Kompromisse zwischen komprimiertem und einfach lesbarem Code bestehen. Viele Programmierer sind stolz auf die Organisation, die in ihrem CSS offensichtlich ist, und würden nicht davon träumen, Kompressoren zu verwenden, die Kommentare und Zeilenumbrüche weglassen. Als Webdesigner sollten Sie Ihre Ziele für den Code, den Sie schreiben, analysieren. Wenn Sie eine kleine Website erstellen, für die nur wenige Zeilen CSS erforderlich sind, ist möglicherweise keine zusätzliche Komprimierung erforderlich. Wenn Sie Code schreiben, den Sie mit einem Team von Programmierern teilen müssen, kann das Einfügen von zusätzlichen Kommentaren und Zeilenumbrüchen Ihren Kollegen viel Zeit und erheblichen Dank ersparen. Wenn Sie jedoch eine große Website entwerfen, die tonnenweise CSS erfordert, möchten Sie auf jeden Fall Ihre Dateigröße im Auge behalten und alles tun, um sie möglichst gering zu halten.
Es kann eine Weile dauern, bis Sie die perfekte Mischung aus Komprimierung und Lesbarkeit gefunden haben, aber beide sind es wert, verfolgt zu werden, und das Erreichen dieses Gleichgewichts kann Ihre Arbeit erheblich erleichtern. Es ist definitiv nicht so, dass die Komprimierung immer zu einer Verringerung der Lesbarkeit führt. Viele Techniken, mit denen Sie Ihren Code komprimieren können, führen zu besserem, besser organisiertem Code.
Lassen Sie uns daher einige Techniken ansprechen, um die Größe Ihrer CSS-Datei auf ein Minimum zu reduzieren.
Leere Style-Blöcke
Beginnen wir mit dem Offensichtlichen. Wenn Sie einen Stilblock mit nichts enthalten, werfen Sie ihn weg. Wimmere nicht darüber, wie du sie später benutzen könntest, sie sind nur Unordnung und du weißt es. Fügen Sie es nicht hinzu, es sei denn, Sie haben einen Grund dazu.
Stenografie
CSS Shorthand ist eine Methode zum Kombinieren mehrerer CSS-Zeilen in einem einzigen Befehl. Wenn Sie sich die Gewohnheit zunutze machen, alle Abkürzungs-Tricks zu verwenden, die Sie kennen, können Sie die Codezeilen, die Sie schreiben, drastisch reduzieren. Hier ist ein Beispiel:
Lange Version:
Kurzfassung:
Weitere CSS-Kurztext-Tricks finden Sie im folgenden Artikel.
CSS-Sprites
Die Grundidee hinter CSS-Sprites besteht darin, die Anzahl der HTTP-Anforderungen zu reduzieren, um das Laden der Seiten zu beschleunigen. Wie Sprites dies erreichen, ist die Kombination mehrerer Bilder in einem einzigen Bild, üblicherweise in einem Rasterformat. Jedes einzelne Bild wird durch Verschieben der Hintergrundposition des größeren Bildes angezeigt. Um mehr über CSS Sprites zu erfahren, lesen Sie das Tutorial von Chris Coyier unter CSS-Tricks:
Kommentarreduzierung
Ich liebe es, meinen Code mit Kommentaren zu füllen. Je mehr Kommentare ich dazu schreibe, desto schneller kann ich die verschiedenen Codeabschnitte visuell sortieren. Wenn Sie sich jedoch für hochoptimiertes CSS mit einem geringen Footprint entscheiden, können übermäßige Kommentare wertvolle KBs auffressen. Versuchen Sie, unnötige Kommentare zu entfernen und diejenigen neu zu formatieren, die Sie so wenig wie möglich benötigen.
Angemessene Schriftfamilien
Wenn die Dateigröße ein großes Problem ist, packen Sie Ihre Schriftfamilien nicht mit Alternativen ein. Schneiden Sie alles unnötige Fett heraus und reduzieren Sie Ihre zusätzlichen Optionen auf ein oder zwei.
Vor:
Nach dem:
Verwenden Sie Hex-Farben
Konvertieren Sie beliebige RGB-Werte in ihre hexadezimalen Entsprechungen, um Zeichen zu reduzieren. Das mag banal erscheinen, aber jeder Charakter zählt!
Vor:
Nach dem:
Beseitigen Sie Zeilenumbrüche
Durchlaufen Sie jeden Style-Block und entfernen Sie unnötige Rückgaben. Sie können auch das letzte Semikolon aufheben
Vor:
Nach dem:
10 Online-CSS-Kompressoren
CSS-Kompressoren automatisieren einen Großteil der Arbeit beim Bereinigen Ihres Codes. Viele von ihnen geben Ihnen den Prozentsatz an, um den Ihre Dateigröße reduziert wurde. Versuchen Sie also, ein paar zu versuchen, um herauszufinden, welche die beste ist.
CSS-Laufwerk
Optionen:
- Kompressionsmodus: Leicht, Normal oder Super Compact
- Kommentar-Stripping: Keine, alle oder länger als eine angegebene Länge
CSS-Kompressor
Optionen (Wählen Sie jeweils Ja oder Nein):
- Eigenschaften sortieren
- Farben komprimieren
- Komprimieren Sie das Schriftgewicht
- Selektor für Kleinbuchstaben
- Entfernen Sie unnötige Backlashes
- Entfernen Sie unnötige Semikolons
Arantius
Optionen (Wählen Sie jeweils Ja oder Nein):
CSS-Optimierer
Optionen:
- Entfernen Sie keine Zeilenumbrüche (Ja oder Nein)
- Rufen Sie CSS aus URL, Datei oder eingefügtem Text ab
Lotterieposten
Optionen: Keine
Reinigen Sie CSS
Optionen (Wählen Sie jeweils Ja oder Nein):
- Selektoren sortieren
- Eigenschaften sortieren
- Selektoren und ihre Eigenschaften optimieren (0, 1 oder 2)
- Abkürzungseigenschaften zusammenführen
- Nur sichere Optimierungen
- Farben komprimieren
- Komprimieren Sie das Schriftgewicht
- Selektor für Kleinbuchstaben
- Groß- und Kleinschreibung für Eigenschaften (Kleinbuchstaben von UpperCase)
- Entfernen Sie unnötige Backslashes
- Konvertieren Sie! Wichtigen Hack
- Letzten entfernen;
- Kommentare speichern
- Ungültige Eigenschaften verwerfen (CSS2.1, CSS2.0 oder CSS1.0)
- Ausgabe als Datei
Pingate
Optionen (Wählen Sie jeweils Ja oder Nein):
- Konvertieren Sie lange Farbnamen in Hex
- Konvertieren Sie lange Hex-Codes in kurze Hex-Codes
- Konvertieren Sie lange Hex-Namen in Farbnamen
- Konvertieren Sie RGB in Hex
- Nullmessungen entfernen
- Kombiniere identische Regeln
- Kombinieren Sie identische Selektoren
- Eigenschaften kombinieren
- Überschriebene Eigenschaften entfernen
- Entfernen Sie unbrauchbare Werte von Rändern und Polsterungen
- Zeige Statistiken
- Ausgabe in Farbe
- Ausgabe mit kleinster Größe
PHP Insider
Optionen: Keine
Zwanzig vor acht
Optionen:
- Unterbrechungsoptionen: 500, 1000, 1500 oder 2000
Seitenspalte
Optionen: Keine
GZIP
Trotz der fürchterlich hässlichen Website ist GZIP ein unglaublich nützliches Werkzeug zum Komprimieren vieler Arten von Code. Dies ist jedoch nicht die einfachste Komprimierungsmethode, die für Anfänger verwirrend sein kann. Weitere Informationen zu GZIPPING Ihres CSS finden Sie in diesem Tutorial.
Fazit
Wie ich bereits gesagt habe, scheinen viele dieser Methoden übereifrig und unanständig zu sein. Der Trick besteht darin, das große Ganze zu betrachten. Obwohl jeder dieser Tipps eine fast unbedeutende Wirkung haben kann, kann das Kombinieren mehrerer oder aller dieser Techniken einen großen Einfluss auf die Dateigröße Ihres CSS haben. Verwenden Sie die folgenden Kommentare, um uns mitzuteilen, welche Kompressions- / Optimierungsmethoden Sie verwenden und warum.