So optimieren Sie CSS

Optimierungsmethoden: 1. Vereinfachen Sie die Kommentare. 3. Verwenden Sie einzeilige Attribute anstelle von mehrzeiligen Attributen. 4. Lassen Sie die Einheit weg, wenn der Wert 0 ist. Legen Sie die Werte mehrerer Elemente gleichzeitig fest. 6. Löschen Sie Leerzeichen und Zeilenumbrüche. 7. Legen Sie die Ablaufzeit fest und verwenden Sie GZip.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die Optimierung des CSS-Codes kann die von der Webseite belegten Bytes reduzieren, die Zeit verkürzen, die der Browser unter den gleichen Bedingungen zum Herunterladen des CSS-Codes benötigt, und das Öffnen der Webseite beschleunigen. Wie optimiert man also CSS-Code? Hier finden Sie einige Tipps zur Optimierung von CSS-Code.

Tipps zur Optimierung von CSS-Code

1. Vereinfachen Sie Ihre Kommentare

In vielen Fällen, insbesondere bei Programmierern, die in Sprachen wie C/Java gearbeitet haben, möchten Sie möglicherweise mehrere Zeilen Kommentare schreiben. zum Beispiel:

Natürlich gibt es in kompilierten Sprachen kein Problem mit solchen Kommentaren, aber in CSS erhöhen sie die Größe der CSS-Datei erheblich. Sie sollten versuchen, es etwa so zu vereinfachen:

Auf diese Weise bleibt die Lesbarkeit erhalten , Reduzierte Dateigröße. Tatsächlich können Sie diese Kommentare in einer echten veröffentlichten Version der CSS-Datei vollständig entfernen.

2. Farbcodes vereinfachen

In CSS beschäftigen wir uns oft mit hexadezimalen Farbcodes. Möglicherweise sind Sie es gewohnt, die folgende „Standardform“ zu schreiben:

color: #ffffff;
color: #ff88ff;

Tatsächlich kann diese Schreibmethode in CSS vereinfacht werden, wir können schreiben:

color: #fff;
color: #f8f;

3. Verwenden Sie einzeilige Attribute anstelle von mehrzeiligen Attributen , das heißt, abgekürzte Attribute verwenden

In CSS können Attribute wie Rand/Abstand/Schriftart/Rahmen in einer Zeile statt in vielen Zeilen festgelegt werden. Zum Beispiel:

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

Wir können schreiben:

padding: 10px 0 10px 0;

Die Reihenfolge ist oben, rechts, unten, links, natürlich Wenn die Werte für links und rechts/oben und unten gleich sind, kann das obige Beispiel einfacher geschrieben werden geschrieben als:

padding: 10px 0;

Wenn die linken und rechten Werte gleich sind, kann es sogar geschrieben werden als:

padding: 10px;

Für andere Abkürzungsmethoden können Sie auf einige Informationen im Internet verweisen. Zum Erlernen des CSS-Schreibprozesses empfehle ich natürlich die Verwendung der Software TopStyle, die konkrete Tipps gibt.

(Lernvideo-Sharing: CSS-Video-Tutorial)

4. Wenn der Wert 0 ist, kann die Einheit weggelassen werden

Zum Beispiel:

padding: 0;

5 Zeit

Beispiel veranschaulichen. Zum Beispiel:

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

Besser kann man es so schreiben:

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. Leerzeichen und Zeilenumbrüche löschen

Dies ist ein sehr unauffälliger Vorgang, aber für CSS muss er anschließend im Internet angewendet werden Das Verlassen der Entwicklungsphase sollte auf diese Weise gehandhabt werden, zumindest werden alle Google-Anwendungen so durchgeführt. Zum Beispiel:

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

sollte wie folgt verarbeitet werden:

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

Tatsächlich sind in der CSS-Datei keine Zeilenumbrüche erforderlich. Damit der Code aber ein wenig lesbar bleibt, empfehle ich dennoch, jedes Element in eine Zeile zu schreiben. Heutzutage stehen Tools zur Verfügung, mit denen Sie etwas Ähnliches tun können, sodass es Ihren Entwicklungsprozess nicht beeinträchtigt.

7. Legen Sie die Ablaufzeit fest und verwenden Sie GZip

Wenn möglich, sollten wir die Ablaufzeit der CSS-Datei festlegen und GZip für die Übertragung der CSS-Datei aktivieren. Wenn Sie Ersteres festlegen, können gängige Browser Ihre CSS-Dateien zwischenspeichern. Dadurch entfällt die Notwendigkeit, die Datei jedes Mal zu lesen, wenn Load ausgeführt wird. Dies beschleunigt den Vorgang erheblich und reduziert gleichzeitig den Datenverkehr. Durch die Aktivierung von GZip können Ihre CSS-Dateien in einem unvorstellbaren Ausmaß verkleinert werden, und die meisten gängigen Browser unterstützen heutzutage GZip.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonSo optimieren Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!