Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code

1. Fügen Sie am Anfang des Stylesheets einen Kommentarblock hinzu, um das Erstellungsdatum, den Ersteller, Tags und andere Notizen des Stylesheets zu beschreiben.

Code kopieren

Der Code lautet wie folgt:

Beispiel-Quellcode:
/*
---------------------------------
Site: Site-Name
Autor: 52CSS.com
Aktualisiert: Datum und Uhrzeit
Aktualisiert von: Name
---------------------------------
*/

2. Einschließlich öffentlicher Farbmarkierung

Code kopieren

Der Code lautet wie folgt:

Beispiel-Quellcode:
/*
---------------------------------
FARBEN
Texthintergrund: #def455
Container-Hintergrund: #fff
Haupttext: #333
Links: #00600f
Besuchte Links: #098761
Hover-Links: #aaf433
H1, H2, H3: Nr. 960
H4, H5, H6: #000
---------------------------------
*/

3. Geben Sie der ID und Klasse aussagekräftige Namen . <br />Nicht empfohlene Benennungsmethode:
Beispiel-Quellcode:

Code kopieren

Der Code lautet wie folgt:

.grüne Box { ... }
#großer Text { ... }

Empfohlene Namenskonvention:
Beispiel-Quellcode:

Code kopieren

Der Code lautet wie folgt:

.pullquote { ... }
#Einführung {... }

4. Integrieren Sie verwandte Stilregeln
Beispiel-Quellcode:

Code kopieren

Der Code lautet wie folgt:

#header { ... }
#header h1 { ... }
#header h1 img { ... }
#Header-Formular { ... }
#header a#überspringen { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
#navigation ul li a:hover { ... }
#Inhalt { ... }
#Inhalt h2 { ... }
#Inhalt p { ... }
#Inhalt ul { ... }
#Inhalt ul li { ... }

5. Fügen Sie Stilen klare Kommentare hinzu
Beispiel-Quellcode:

Code kopieren

Der Code lautet wie folgt:

/*
---------------------------------
Kopfzeilenstile
---------------------------------
*/
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#Header-Formular { ... }
/*
---------------------------------
Navigationsstile
---------------------------------
*/
#navigation { ... }

<<: JS ES: Neue Funktion zur variablen Entkopplungszuweisung

>>: Beispiel für die Wertübertragung in einem HTML-Formular über die Get-Methode

Ein Bugfix für Tomcats automatisches Herunterfahren

Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code

Ein Bugfix für Tomcats automatisches Herunterfahren

Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue

Mehrere Möglichkeiten zum Hinzufügen von Zeitstempeln in MySQL-Tabellen

10 HTML-Tabellen-bezogene Tags

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die vue3.0-Projektarchitektur erstellen

CSS-Animation kombiniert mit SVG zur Erzeugung eines Energieflusseffekts

Axios Sekundärkapselungsbeispiel Demo im Projekt

Zusammenfassung der Merkmale des SQL-Modus in MySQL

So setzen Sie das Root-Passwort in CentOS7 zurück

Beispielcode, wie CSS mehrere Klassen abgleicht

Artikel empfehlen

Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)

So implementieren Sie eine automatische Remote-Sicherung von MongoDB unter Linux

Im Mybatis MySQL-Löschvorgang kann nur die erste Datenmethode gelöscht werden

7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen

Callback-Funktionen in JavaScript verstehen und verwenden

Detaillierte Einführung in den Nobody-Benutzer und Nologin im Unix/Linux-System

CSS3 realisiert das Effektdiagramm zur Produktanzeige auf der Website

So stellen Sie Ihre erste Anwendung mit Docker bereit

Vertieftes Verständnis des Implementierungsprinzips des Require Loader

Ein Artikel bringt Ihnen die Vererbung von JS-Funktionen bei

So rufen Sie mit dem Flash-Plugin die Kamera des PCs auf und binden diese in die TML-Seite ein

MySQL NULL-Datenkonvertierungsmethode (unbedingt lesen)

Tutorial-Diagramm zur Installation von Zabbix2.4 unter Centos6.5

Einstellungen für den Ubuntu-Boot-Autostart-Dienst

So verwenden Sie rsync unter Linux