Wie können Anfänger CSS-Code rationalisieren und optimieren? Sie werden es wissen, nachdem Sie dies gelesen haben

Der Inhalt dieses Artikels befasst sich mit der Optimierung und Optimierung von CSS-Code. Ich hoffe, dass er für Freunde hilfreich ist.

1. Vereinfachen Sie Ihre Kommentare

In vielen Fällen, insbesondere bei denen, die sich mit Sprachentwicklung wie C/Java beschäftigt haben Programmierer möchten vielleicht mehrzeilige Kommentare schreiben, wie 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. Das sollten Sie versuchen Vereinfachen Sie es wie folgt:

Dadurch wird die Dateigröße reduziert, während die Lesbarkeit erhalten bleibt. 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 Schreibweise in CSS vereinfacht werden, wir können schreiben:

color: #fff;
color: #f8f;

3. Verwenden Sie einzeilige Attribute anstelle von mehrzeiligen Attributen

In CSS-Attributen wie Rand/Padding/Schriftart/Rahmen usw. können Sie eine Zeile verwenden, um viele Zeileneinstellungen zu ersetzen, 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 natürlich oben, rechts, unten, links, wenn die Werte angegeben werden ​​Links und rechts/oben und unten sind gleich, es kann beispielsweise einfacher geschrieben werden. Das obige Beispiel kann wie folgt geschrieben werden: padding: 10px 0;

Wenn oben, unten, links und rechts sind gleich, es kann sogar geschrieben werden als:

padding: 10px;

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

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

Zum Beispiel: padding: 0;

5 mehrere Einstellungen gleichzeitig Ein Beispiel für die Attribute eines Elements

. Zum Beispiel:

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

Eine bessere Schreibweise ist:

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

6. Entfernen Sie Leerzeichen und Zeilenumbrüche
Das ist Sehr unauffällige Bedienung, aber dies sollte für CSS erfolgen, das das Entwicklungsstadium verlassen hat und im Internet angewendet werden soll. So werden zumindest alle Google-Anwendungen durchgeführt. Beispielsweise sollte

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

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 von CSS-Dateien 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. Dadurch wird der Vorgang erheblich beschleunigt und gleichzeitig der Datenverkehr reduziert. 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.

Das Obige ist eine vollständige Einführung, wie Anfänger CSS-Code optimieren und optimieren können. Wenn Sie mehr über CSS-Video-Tutorials erfahren möchten, lesen Sie bitte die Chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonWie können Anfänger CSS-Code rationalisieren und optimieren? Sie werden es wissen, nachdem Sie dies gelesen haben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!