Es ist sehr wichtig, dass der CSS-Code klar und deutlich ist. Dieser Teil ist die Haupteinführung.
Normalerweise verweisen wir nur auf ein CSS für eine Seite, aber bei größeren Projekten müssen wir CSS-Dateien klassifizieren.
Je nach Art und Zweck von CSS können wir CSS-Dateien in „öffentliche Stile“, „spezielle Stile“ und „Skin-Stile“ unterteilen und in dieser Reihenfolge auf sie verweisen. Was sind sie also?
Der öffentliche Stil ist der wichtigste Teil. Für relativ kleine Projekte führen wir nur ein CSS ein. Der Stil dieses CSS ist im Allgemeinen: „Standardwerte von Etiketten zurücksetzen und festlegen“. (um Unterschiede zwischen verschiedenen Browsern zu beseitigen), „einheitlicher Aufruf von Hintergrundbildern und Löschen von Floats oder anderen langen Stilen, die einheitlich verarbeitet werden müssen (sodass nicht jeder einzeln verarbeitet werden muss)“, „universelles Website-Layout“, „ „Universalmodul“ und seine Erweiterungen“, „Komponenten und ihre Erweiterungen“, „Funktionsstil“, „Skinstil“.
Ein besonderer Stil besteht darin, einen solchen besonderen Stil unabhängig in eine Spalte mit einer hohen Wartungsrate oder eine Seite einzuführen, die sich erheblich von der gesamten Website unterscheidet, um unsere Wartung zu erleichtern.
Der Hautstil bedeutet, dass das Produkt die Funktion zur Hautveränderung benötigt. Daher müssen wir die Farbe, den Hintergrund usw. extrahieren und zur einfacheren Verwaltung hier einfügen.
Wir unterteilen CSS-Dateien in öffentliche Stile, spezielle Stile und Skin-Stile. Wie klassifizieren wir CSS-Dateien intern? (Dieser Teil steht im Mittelpunkt)
CSS-Code zurücksetzen und auf Standard setzen. Dadurch sollen die Unterschiede zwischen Standardstilen und Browsern beseitigt und der anfängliche Stil einiger Tags festgelegt werden, um spätere Doppelarbeit zu vermeiden. Sie können es entsprechend den Anforderungen Ihrer eigenen Website festlegen oder einen von anderen geschriebenen Initialisierungscode verwenden, z. B. den von Yahoo-Ingenieuren bereitgestellten CSS-Initialisierungscode. Dieser Teil des Codes wird oben im CSS platziert.
Einheitlich verarbeiteter CSS-Code. Hier können Sie das Hintergrundbild einheitlich aufrufen und den Float löschen (bezogen auf den klaren Inhalt im vielseitigeren Layout, Modul und Originaldokument. Tatsächlich enthält der von Yahoo-Ingenieuren bereitgestellte CSS-Initialisierungscode den CSS-Code zum Löschen des Floats). . Dieser Teil des Codes wird unter dem Reset- und Standard-CSS-Code platziert.
Layout (Raster): Wir unterteilen die Seite in mehrere große Blöcke, normalerweise einschließlich Kopfzeile, Hauptteil, Hauptspalte, Seitenspalte, Ende usw. Häufig verwendet!
Modul: ein größeres semantisches Ganzes, das wiederverwendet werden kann. Wie Navigation, Login, Registrierung, Liste, Kommentar, Suche usw. Häufig verwendet!
Komponente (Einheit): Es handelt sich in der Regel um eine relativ kleine Einzelperson, die nicht unterteilt werden kann und in verschiedenen Modulen wie Schaltflächen, Eingabefeldern, Ladevorgängen, Diagrammen usw. wiederverwendet wird. Häufig verwendet!
Funktion: Um die Verwendung einiger häufig verwendeter Stile zu erleichtern, trennen wir diese häufig verwendeten Stile und verwenden sie nach Bedarf. Normalerweise haben diese Selektoren eine feste Stilleistung, z. B. das Löschen von Floats. Nicht häufig verwendet, nicht missbraucht!
Skin: Wird für Websites mit Skin-Änderung benötigt, um den Skin-Typ-Stil zu extrahieren. Es kann nicht für Websites ohne Skin-Änderung missbraucht werden und wird nicht häufig verwendet.
Status: einige Statusstile. Wird nicht häufig verwendet.
CSS-Benennungsregeln
Wichtig: Klassenselektoren verwenden, ID-Selektoren verwerfen. Aufgrund der Einzigartigkeit der ID auf einer Seite kann sie nicht wiederverwendet werden, wenn Sie sie als Selektor zum Schreiben von CSS verwenden. Der Vorteil der Klasse ist die Wiederverwendbarkeit und der Grad der Privatsphäre ist nicht hoch. Daher wähle ich normalerweise die ID in HTML für JavaScript, verwende aber in CSS nur eine Klasse, überhaupt keine ID. Dadurch werden Leistung und Verhalten tatsächlich getrennt, anstatt sie miteinander zu vermischen.
Wie verwendet man also den Nachkommenselektor? Wir sind uns einig, dass Klassenselektoren, denen kein einzelner Buchstabe + „-“ vorangestellt ist und die eine Länge größer oder gleich 2 haben, Nachkommenselektoren sind. Zum Beispiel: .g-date .u-rightArrow{ float: right;} Das ist unangemessen, wir können es direkt als .u-rightArrow{ float: right;} schreiben. Und ein semantischer Tag kann auch ein Nachkommenselektor sein. Zum Beispiel.m-list li{}. Der vorherige Satz bedeutet, dass Tags, die nicht semantisch sind, nicht als Nachkommenselektoren geeignet sind, wie zum Beispiel: .m-list div{} Eine solche Schreibweise führt wahrscheinlich zu Verschmutzung.
CSS-Codeformat
1. Selektoren, Attribute und Werte sind alle in Kleinbuchstaben.
Das ist sehr wichtig: Gemäß der XHTML-Spezifikation müssen alle Tag-Attribute und -Werte in Kleinbuchstaben geschrieben werden, und wir wissen, dass XHTML eher dem Standard entspricht, daher ist es am besten, sich daran zu halten Der Selektor muss in Kleinbuchstaben geschrieben sein. Das ist sehr notwendig. In diesem Fall können wir Klassennamen nicht in Kamel-Schreibweise schreiben. Beispielsweise ist class="u-left_arrow" tatsächlich unregelmäßig. Es ist besser, class="u-left_arrow" zu schreiben, was auch die gleiche Bedeutung haben kann.
2. Vervollständigen Sie eine Selektordefinition in einer einzigen Zeile.
Vorteile: Leicht zu findende und lesbare Selektoren, einfaches Einfügen und Bearbeiten neuer Selektoren, leicht zu identifizierende Module usw. Noch wichtiger ist, dass überschüssige Leerzeichen entfernt werden können, um den Code kompakter zu gestalten und Zeilenumbrüche zu reduzieren. Stellen Sie sich vor, wenn jede Zeile nur einen Attributnamen und einen Attributwert hat, ist es bei einem großen Projekt schwierig, den Selektor zu finden und zu lesen. Wenn Sie einen Selektor in eine Zeile schreiben, kann er auf 1/6 gekürzt werden 1/10, das ist immer noch sehr objektiv.
3. Der letzte Wert muss ebenfalls mit einem Semikolon enden.
Tatsächlich kann das Semikolon für den Wert vor dem Ende der Klammer weggelassen werden, dies führt jedoch zu unnötigen Fehlern und Problemen bei Änderungs-, Ergänzungs- und Wartungsarbeiten. Wenn Sie beispielsweise am Ende ein Attribut hinzufügen und am Ende noch kein Semikolon hinzugefügt haben, müssen Sie vor dem neu hinzugefügten Attribut ein Semikolon hinzufügen, da sonst ein Fehler auftritt In Blogbeiträgen habe ich das Problem gelöst, dass chinesische Schriftarten quadratisch angezeigt werden. Dieses Problem trat beim Hinzufügen von JSON-Daten zur Box auf.
Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
