So optimieren Sie das Schreiben von CSS

Css-Schreiboptimierung: 1. Die Verschachtelungsebene sollte nicht zu tief sein, im Allgemeinen nicht mehr als 4 Ebenen. 2. Vermeiden Sie die Verwendung von Elementselektoren, da dies für spätere Änderungen nicht förderlich ist. 3. Vermeiden Sie die Verwendung von Gruppenselektoren öffentliche Klasse und definieren Der gleiche Stil ist bequemer. 4. Reduzieren Sie die Anzahl der eingeführten Dateien und die Inhaltsanzeige muss priorisiert werden.

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

Beim Schreiben von CSS müssen Sie die Benennung von ID, Klasse usw., die Dateistruktur, die Extraktion gemeinsamer Module, die Wiederverwendbarkeit des Codes, die Lesbarkeit, die Skalierbarkeit und die Wartbarkeit berücksichtigen spätere Phase. Wartungsänderungen. Wenn Sie darüber nachdenken, ausreichend wissenschaftliches CSS zu schreiben, müssen Sie die folgenden Aspekte berücksichtigen.

Analysieren Sie zunächst die Anforderungen und trennen Sie den Header, die Navigation, die Seitenleiste, den Bannerbereich, den Hauptinhaltsbereich, den unteren Bereich usw. nach Bedarf. Da die Wiederverwendbarkeit der erforderlichen Dinge sehr hoch ist und keinem festen Modul wie Paging, Popup-Fenster usw. zugeordnet werden kann, müssen sie einen separaten Abschnitt von exklusivem CSS und JS, dh Komponentisierung, trennen. Durch die klare Struktur ist die Wartung einfach.

Verfeinern Sie es dann und finden Sie einige kleine Teile mit hoher Wiederverwendbarkeit, z. B. Rahmen, Hintergründe, Symbole, Schriftarten, Ränder, Layoutmethoden usw. Diese werden häufig verwendet, was zu Coderedundanz und Schwierigkeiten bei der Wartung führt. Daher muss dieser Teil einheitlich gepflegt und geändert werden.

Gleichzeitig ist die Reihenfolge des Codes auch wichtig, um die Wartung und Vererbung oder kaskadierende Abdeckung zu erleichtern. Zusätzlich zu diesen Unfällen kann auch das Hinzufügen eines Verzeichnisses oder Namens vor dem Codesegment durch Kommentare die Wartung erleichtern.

Abschließend sollten Sie auf Folgendes achten:

1 Die Verschachtelungsebene sollte nicht zu tief sein, da dies die Renderzeit verlängert. Im Allgemeinen sind nicht mehr als 4 Schichten am besten.

2. Vermeiden Sie die Verwendung von Elementselektoren.

Grund:

• Das gleiche Element kann mehrmals verwendet werden. Wenn der Browser durchläuft, durchläuft er alle Elemente, was unnötig ist.

• Anforderungen und Codestruktur können sich jederzeit ändern und auf anderen Seiten wiederverwendet werden, oder es können Inhalte zu dieser Seite hinzugefügt werden, daher ist die Verwendung eines Elementselektors zum Festlegen von etwas für spätere Änderungen nicht förderlich.

3. Vermeiden Sie die Verwendung von Gruppenselektoren.

Zum Beispiel:

.header ul li,.content ul li,.footer ul li{border-left:1px solid red};

In diesem Fall sollten Sie eine öffentliche Klasse extrahieren und dann denselben Stil definieren, was praktischer ist.

4. Die Anzahl und Reihenfolge der Dateieinführungen

Die Anzahl der Dateianfragen sollte so gering wie möglich sein, der Inhalt sollte in der Reihenfolge angezeigt werden und die Dateien sollten der Reihe nach geladen werden, damit Benutzer mehr sehen können Wichtige zuerst.

Unter dem Gesichtspunkt des Widerspruchs können wir bei der Benennung eines Stils nicht in Betracht ziehen, zwei Module mit unterschiedlichen Funktionen zu benennen, die im Designentwurf ähnliche Stile wie „Neuigkeiten“, „Über“ usw. haben wird aus Kategorie, Funktion und Seite berücksichtigt. Erleichtern Sie es den Menschen, Verbindungen zwischen Namen und Strukturen herzustellen. Nachdem Sie das Schreiben von CSS besser beherrschen, können Sie einen CSS-Präprozessor verwenden, um die Effizienz zu verbessern.

(Teilen von Lernvideos: CSS-Video-Tutorial)

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