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
Problemaufzeichnung bei der Verwendung des Vue+Echarts-Diagramms
Vorwort echarts ist mein am häufigsten verwendete...
Mysql | Detaillierte Erklärung der Fuzzy-Abfrage mit Platzhaltern (wie, %, _)
Wildcard-Kategorien: %Prozent-Platzhalter: Gibt a...
CSS setzt die Höhe des Box-Containers (div) immer auf 100 %
Vorwort Manchmal muss die Höhe eines Box-Containe...
Kostenloses Tool zur Überprüfung der Richtigkeit von HTML-, CSS- und RSS-Feeds
Ein Trick zum Umgang mit dieser Art von Fehlern be...
Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue
Inhaltsverzeichnis Szenario Versuchen Sie zu löse...
JavaScript realisiert Lupen-Spezialeffekte
Der zu erzielende Effekt: Wenn die Maus auf das k...
Das Linux-System verbietet den Remote-Login-Befehl des Root-Kontos
PS: So deaktivieren Sie die Remote-Anmeldung des ...
Grundlegende Konzepte und allgemeine Methoden des Map-Mappings in ECMAScript6
Inhaltsverzeichnis Was ist eine Zuordnung? Unters...
Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)
Rendern Nachdem ich online nach relevanten Inform...
So binden Sie einen Docker-Container an eine externe IP und einen externen Port
Docker ermöglicht die Bereitstellung von Netzwerk...
Detaillierter Prozess zum Erstellen eines NFS-Servers mithilfe des NFS-Ganesha-Image von Docker
Inhaltsverzeichnis 1. Einführung in NFS-Ganesha 2...
Vue+video.js implementiert Video-Wiedergabelisten
In diesem Artikel wird der spezifische Code von v...
Docker benennt den Imagenamen und die TAG-Operation um
Bei der Verwendung von Docker-Images können Image...
Verwenden Sie die MySQL-Master-Slave-Konfiguration, um eine Lese-/Schreibtrennung zu erreichen und den Datenbankdruck zu verringern
Um eine große Anzahl gleichzeitiger Besuche bewäl...
Hinweise zum Systemaufruf des Linux-Kernel-Gerätetreibers
/**************************** * Systemaufruf*****...