Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code

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

Artikel empfehlen

Lösung für das Problem, dass Xshell keine Verbindung zur virtuellen VirtualBox-Maschine herstellen kann

Lassen Sie uns zunächst den Netzwerkeinstellungsm...

Implementieren einer verteilten Sperre mit MySQL

einführen In einem verteilten System ist die vert...

Verwenden Sie js, um ein einfaches Schlangenspiel zu schreiben

In diesem Artikel wird der spezifische Code eines...

CSS3-Radarscan-Kartenbeispielcode

Verwenden Sie CSS3, um coole Radar-Scan-Bilder zu...

Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts

Vorwort Verwenden Sie js, um einen Jahresrotation...

Detaillierte Verwendung von React.Children

Inhaltsverzeichnis 1. Reagieren.Children.map 2. R...

Auszeichnungssprache – CSS-Stil für Webanwendungen

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Analyse der Gründe, warum der Index bei der Suche im MySql-Bereich nicht wirksam wird

1 Problembeschreibung Dieser Artikel sortiert den...

So führen Sie SQL-Anweisungen automatisch aus, wenn MySQL in Docker gestartet wird

Wenn wir mit Docker einen MySQL-Container erstell...

So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit

Als ich kürzlich ein WeChat-Applet schrieb, erfor...

JavaScript entfernt unnötige Eigenschaften eines Objekts

Inhaltsverzeichnis Beispiel Methode 1: Löschen Me...

Grundlegende Konzepte und allgemeine Methoden des Map-Mappings in ECMAScript6

Inhaltsverzeichnis Was ist eine Zuordnung? Unters...

CentOS7-Installations-Tutorial für Zabbix 4.0 (Abbildung und Text)

Deaktivieren Sie SeLinux setenforce 0 Dauerhaft g...

Detaillierte Erklärung des Unterschieds zwischen tinyint und int in MySQL

Frage: Was ist der Unterschied zwischen int(1) un...

Detaillierte Erläuterung des Linux-CRM-Bereitstellungscodes

Linux-Grundkonfiguration Kompilieren und installi...