Originaltext |. über: 9 Tipps für kleinere und optimierte CSS-Dateien
Autor|Autor: Stefan Vervoort
Übersetzung|Trans: Luc
Da CSS-Dateien am Kopf der Webseite geladen werden, lädt jeder Besucher diese Dateien herunter. Wir optimieren PHP-Dateien und Bilder, ignorieren jedoch häufig CSS-Dateien. Heute sollten wir über dieses Problem nachdenken und etwas dagegen unternehmen.
Es ist möglich, CSS mit CSS-Optimierern zu optimieren, aber ich denke, dass sowohl die Effizienz als auch die Leistung verbessert werden, wenn Sie Ihren Code mit den unten genannten Techniken schreiben.
Durch die Optimierung von CSS-Dateien kann außerdem Traffic eingespart und die Seitenladegeschwindigkeit erhöht werden.
1. Kommentare Kommentare sind besonders beim Schreiben von CSS nützlich, damit Kollegen bei der Zusammenarbeit die Bedeutung des Codes verstehen. Es gibt viele Möglichkeiten zum Kommentieren. Sie können die folgenden Methoden verwenden:
/*-------------------*/
/*-----Kommentar-------*/
/*-------------------*/
Sie können auch die folgende Methode verwenden:
/*Kommentar*/
Dadurch werden 20 Zeichen eingespart, und bei 15 Kommentaren werden 300 Zeichen eingespart.
2. Abgekürzte Farbcodes Farbcodes werden mit HEX-Codes definiert, die 6 Zeichen enthalten, in einigen Fällen können jedoch stattdessen auch 3 Zeichen verwendet werden. Schauen Sie sich das folgende Beispiel an:
div{ color: #ffffff; } /* Shortcode: color:#fff;
div{ color: #ff88ff; } /* Shortcode: color:#f8f;
div{ color: #f8f7f2 } /* Kein Shortcode möglich */
3. Elemente zusammenführen. Wenn es beispielsweise eine Reihe von Elementen wie h2, h3 und h4 gibt und alle dieselben Attribute haben und sich nur einige Attribute unterscheiden, können Sie es wie folgt schreiben:
h2, h3, h4 {
Polsterung:0;
Rand:0;
Farbe:#333;
Buchstabenabstand: .05em;
Wortabstand:0,1em;
}
h2{ Schriftgröße:1.2em }
h3{ Schriftgröße:1.1em }
h4{ Schriftgröße:1em }
Dadurch werden Elemente mit denselben Attributen zusammengeführt und gleichzeitig unterschiedliche Schriftgrößenattribute deklariert. Kann viel Platz sparen.
4. Wenn der Wert 0 ist, wird Out Px/Em/% weggelassen.
0 erfordert kein Px, Em und Prozentzeichen. Wenn Ihr Wert 0 ist (was Sie meiner Meinung nach verwenden werden), werden durch Weglassen der Einheit doppelt so viele Zeichen eingespart.
div{ padding: 0px 5px 5px 10px }
/* Abkürzung: padding: 0 5px 5px 10px;
5. Attribute zusammenführen. Einige Attribute wie Abstand, Rand und Rand können separat geschrieben werden. Zum Beispiel: Polsterung oben, Polsterung rechts, Polsterung unten und Polsterung links.
Wenn möglich, kombinieren Sie sie, um das Schreiben zu erleichtern und Platz zu sparen.
div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px }
/* Abkürzung: padding:50px 4px 23px 0;
Wenn der obere und untere Wert gleich sind und der linke und rechte Wert gleich sind, können Sie schreiben:
div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px }
/* Abkürzung: padding:5px 0;
6. Wählen Sie Klassen/ID mit Bedacht aus
Die ausgewählten Klassen- und ID-Namen sollten möglichst kurz, leicht verständlich und aussagekräftig sein.
Vermeiden Sie Namen wie „HeaderMiddleLeftCategories“, sondern verwenden Sie stattdessen „h-cats“. Dadurch werden viele Zeichen eingespart.
7. Bereinigen Sie CSS-Dateien, um Platz zu sparen. Beim Erstellen einer Website mit CSS funktioniert der geschriebene Code möglicherweise nicht und nimmt viel Platz ein. CSS-Dateien sollten durchgehend auf Fehler und ungültigen Code überprüft werden, um Platz zu sparen.
8. Entfernen Sie das Semikolon aus dem letzten Attribut im Selektor. Dies ist ein Trick, den ich mit dem CSS-Kompressor entdeckt habe.
Körper{
Hintergrund:#ccc;
Farbe:#333; }
/* Shortcode: color:#333 */Sehen Sie, ich habe das letzte Semikolon entfernt. Der Effekt ist vielleicht nicht offensichtlich, aber 50 Selektoren sind 50 Zeichen.
9. Löschen Sie unnötige Leerzeichen und Wagenrückläufe. Möglicherweise möchten Sie alle Leerzeichen und Wagenrückläufe löschen, da sie ein Zeichen beanspruchen. Das Problem dabei ist jedoch, dass dadurch die Struktur von CSS zerstört und die Lesbarkeit verringert wird.
Normalerweise mache ich das nicht, wenn ich CSS-Dateien optimiere, weil mir die Struktur wichtiger ist. Hier ist ein Kompromiss: Verwenden Sie auf der Website Dateien, die keine Zeilenumbrüche und Leerzeichen enthalten. Das lokale Speichern von Dateien mit Wagenrückläufen und Leerzeichen macht die Bearbeitung sehr komfortabel.
Fazit Wenn Sie CSS-Dateien vollständig optimieren möchten, empfehle ich die Verwendung des CSS-Kompressors, damit Sie die oben genannten Fähigkeiten selbst erlernen und die Schreibgeschwindigkeit und Qualität des CSS-Codes verbessern können.
Wenn Sie weitere Tipps haben, hinterlassen Sie bitte eine Nachricht.