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
Lernen Sie die gängigen Methoden und Techniken in JS-Arrays und werden Sie ein Meister
Inhaltsverzeichnis splice() Methode join() Method...
Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt
Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...
Installieren Sie OpenSSH unter Windows und melden Sie sich beim Linux-Server an, indem Sie einen SSH-Schlüssel generieren.
Der vollständige Name von SSH ist Secure SHell. D...
Vue verwendet den Rich-Text-Editor vue-quill-editor und lädt Bilder auf den Server hoch
Inhaltsverzeichnis 1. Vorbereitung 2. Definieren ...
So implementieren Sie Hot Deployment und Hot Start in Eclipse/Tomcat
1. Hot Deployment: Das bedeutet, das gesamte Proj...
Zusammenfassung der WEBAPP-Entwicklungskompetenzen (Hinweise zur Entwicklung mobiler Websites)
1. Um das Web responsive zu entwickeln, muss sich...
Eine umfassende Zusammenfassung häufig verwendeter Anweisungen in MySQL (unbedingt lesen)
Die unten zusammengefassten Wissenspunkte werden ...
Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px
Ich glaube, dass viele Benutzer, die Websites ers...
Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3
Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...
Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux
Angenommen, es gibt zwei Linux-Server A und B, un...
So löschen Sie ein Image in Docker
Der Befehl zum Löschen von Bildern im Docker laut...
Vergleichende Analyse der Hochverfügbarkeitslösungen von Oracle und MySQL
Was die Hochverfügbarkeitslösungen für Oracle und...
Zwei Möglichkeiten zum Schreiben gespeicherter Prozeduren in MySQL mit und ohne Rückgabewerte
Vorgang 1: mit Rückgabewert: Prozedur löschen, fa...
Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm
Wie wir alle wissen, haben die Webseiten, Websites...
Detaillierte Diskussion der Speicherprinzipien: Werden Variablen in JS im Heap oder Stack gespeichert?
Inhaltsverzeichnis 1. Der Elefant, der nicht in d...