5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten

5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten
1. CSS alphabetisch ordnen
Nicht in alphabetischer Reihenfolge:

Code kopieren
Der Code lautet wie folgt:

div#header h1 {
Z-Index: 101;
Farbe: #000;:
Position: relativ;
Zeilenhöhe: 24px;
Rand rechts: 48px;
Rahmen unten: 1px durchgezogen #dedede;
Schriftgröße: 18px;
}

In alphabetischer Reihenfolge:

Code kopieren
Der Code lautet wie folgt:

div#header h1 {
Rahmen unten: 1px durchgezogen #dedede;
Farbe: #000;
Schriftgröße: 18px;
Zeilenhöhe: 24px;
Rand rechts: 48px;
Position: relativ;
Z-Index: 101;
}

Der Grund ist folgender: Es ist besser, ein bestimmtes Attribut zu finden.
2. CSS-Struktur besser organisieren <br />Verwenden Sie CSS-Kommentare, um CSS zu gruppieren, damit die Struktur klar ist und die gemeinsame Entwicklung fördert.
/****Zurücksetzen****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
/*****Layouts*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
3. Seien Sie konsistent <br />Verschwenden Sie keine Zeit mit Diskussionen darüber, ob es besser ist, alle Attribute eines Selektors in eine Zeile oder jedes Attribut in eine Zeile zu schreiben. Wenn Sie lieber in einer Zeile schreiben, denn wenn Sie nur eine Zeile pro Reihe schreiben, erscheint das gesamte Dokument zu lang und ist schwer zu finden. Aber wenn ich es an eine andere Person im Team schicke, möchte diese jeden Satz in einer Zeile haben. Was soll ich tun? Eigentlich ist es ganz einfach. Senden Sie das CSS einfach zur Überprüfung an das W3C und es wird ein Ergebnis erzeugt, das automatisch in jede Zeile konvertiert wird.
4. Erst Markup, dann CSS
Die Fehleranfälligkeit ist geringer, wenn Sie die HTML-Auszeichnung fertigstellen, bevor Sie CSS schreiben. Wenn Sie beispielsweise eine Seite schreiben, schreiben Sie zuerst eine grundlegende Tag-Struktur <body>

Code kopieren
Der Code lautet wie folgt:

<div id="Wrapper">
<div id="header"><!--Ende #header-->
<div id="Behälter">
<div id="Inhalt">
</div><!--Ende #Inhalt-->
<div id="Seitenleiste">
</div><!--Ende #sidebarr-->
</div><!--Ende #Container-->
<div id="Fußzeile">
</div>!<--Ende #footer-->
</div><!--Ende #Wrapper-->
</body>

Versuchen Sie dann, untergeordnete Selektoren sinnvoll zu nutzen, anstatt jedem Element, das Sie formatieren möchten, einen Selektor hinzuzufügen.
5. CSS-Reset <br />Sie können Eric Meyer Reset, YUI Reset oder andere CSS-Resets kopieren, sollten diese dann aber entsprechend Ihrem Projekt durch einen eigenen Reset ersetzen.
* { margin: 0; padding: 0; } Dieser Satz trifft auf einige Elemente wie Optionsfelder nicht zu, aber wenn Optionsfelder vorhanden sind, können Sie sie einfach zurücksetzen.

<<:  Zusammenfassung des Wissens über Einbettungsanweisungen, die Vue-Ingenieure kapseln müssen

>>:  HTML (CSS-Stilspezifikation) muss lauten

Artikel empfehlen

Docker-Bereinigungsumgebungsvorgang

Beginnen Sie vorsichtig mit der Reinigung! Auflis...

Analyse des Quellcodes des Nginx-Speicherpools

Inhaltsverzeichnis Speicherpoolübersicht 1. Nginx...

Eine kurze Diskussion über JS-Prototypen und Prototypenketten

Inhaltsverzeichnis 1. Prototyp 2. Prototypzeiger:...

Analysieren von AB-Leistungstestergebnissen unter Apache

Ich habe immer Loadrunner für Leistungstests verw...

Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by

1. Überprüfen Sie sql_mode wählen Sie @@sql_mode ...

Wie stelle ich Tomcat als automatisch gestarteten Dienst ein? Der schnellste Weg

Stellen Sie Tomcat so ein, dass der Dienst automa...

Detaillierte Erklärung der dynamischen Komponenten von vue.js

:ist eine dynamische Komponente Verwenden Sie v-b...

HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

1. HTML-Code Code kopieren Der Code lautet wie fo...

Flex-Layout ermöglicht adaptive Seiten (Syntax und Beispiele)

Einführung in Flex Layout Flex bedeutet auf Engli...

Die normale Methode der MySQL-Deadlock-Prüfungsverarbeitung

Normalerweise wird bei einem Deadlock die Verbind...

Detaillierter Beispielcode einer MySQL-Batch-Einfügeschleife

Hintergrund Als ich vor einigen Tagen Paging in M...

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Swap deaktivieren Wenn auf dem Server ein Datenba...

Elementui exportiert Daten in XLSX- und Excel-Tabellen

Kürzlich habe ich vom Vue-Projekt erfahren und bi...

Lösung für das Problem des achtstündigen Unterschieds bei der MySQL-Einfügezeit

Lösen Sie das Problem des achtstündigen Zeitunter...

Vue implementiert einen einfachen Lupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...