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
Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code
Möglicherweise ist Ihnen aufgefallen, dass auf die...
Zusammenfassung der täglichen Verwaltungsbefehle von mysqladmin unter MySQL (unbedingt lesen)
Das Verwendungsformat des mysqladmin-Tools ist: m...
Detaillierte Erläuterung der Clientkonfiguration für die Entwicklung von vue3 + electron12 + dll
Inhaltsverzeichnis Ändern der Repository-Quelle S...
Detaillierte Erklärung mehrerer Möglichkeiten zum Erstellen eines oberen linken Dreiecks in CSS
Heute stellen wir mehrere Möglichkeiten vor, mit ...
Die neuesten 36 hochwertigen kostenlosen englischen Schriftarten freigegeben
01. Unendlichkeit Schriftart herunterladen 02. Ban...
Detaillierter Prozess zum Kompilieren und Installieren von Storm auf dem Kylin V10-Server
1 Einleitung Apache Storm ist ein kostenloses, Op...
So installieren Sie Nginx in CentOS7 und konfigurieren den automatischen Start
1. Laden Sie das Installationspaket von der offiz...
CSS zum Implementieren von QQ-Browserfunktionen
Code Wissenspunkte 1. Kombinieren Sie fullpage.js...
Zusammenfassung der Wissenspunkte zu Null in der MySQL-Datenbank
In der MySQL-Datenbank ist Null eine häufige Situ...
So implementieren Sie die Zuordnung zwischen Rahmenfenstern und die Verwendung des Zielattributs von Hyperlinks
Der Schlüssel zum Erreichen der Zuordnung des Rahm...
So verwenden und begrenzen Sie Requisiten in React
Die Requisiten der Komponente (Requisiten sind ei...
MySql implementiert die Seitenabfragefunktion
Zunächst müssen wir klarstellen, warum wir pagini...
Drei häufige Verwendungen von OpenLayers6-Karten-Overlays (Markierungstext im Popup-Fenster)
Inhaltsverzeichnis 1. Schreiben Sie vor 2. Overla...
Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt
Heute werde ich ein kleines Javascript-Animations...
So verhindern Sie, dass Iframes in HTML zur Seite springen, und verwenden Iframes, um die WeChat-Webversion in die Seite einzubetten
Ich möchte nur eine kleine Sache machen, die Winf...