In meiner letzten Arbeit bin ich auf viele Probleme gestoßen. Eines davon ist meiner Meinung nach das wichtigste, und das ist die Reihenfolge, in der CSS geschrieben wird. Es kann die Gedanken eines Front-End-Mitarbeiters widerspiegeln. Wenn Sie diesen Artikel sehen, hören Sie bitte auf, das Attribut zu schreiben, das Ihnen in den Sinn kommt.
Werfen wir zunächst einen Blick auf die von Firefox empfohlene Schreibreihenfolge
* Basisstile von mozilla.org
* verwaltet von fantasai
* (Klassen definiert im Markup Guide -http:// mozilla.org /contribute/writing/markup)
*/
/* Empfohlene Reihenfolge:
//Attribute anzeigen
* Anzeige
* Listenstil
* Position
* float
* klar
//Selbstattribut
* Breite
* Höhe
* Rand
* Polsterung
* Rand
* Hintergrund
//Text Attribut
* Farbe
* Schriftart
* Textdekoration
* Textausrichtung
* Vertikalausrichtung
* Leerraum
* anderer Text
* Inhalt
*
*/
Wie Sie an der oben empfohlenen Reihenfolge sehen können, ist es sehr organisiert. Die oben empfohlene Reihenfolge umfasst keine detaillierteren Attribute wie: oben, rechts, unten, links usw. Einige Leute fragen sich vielleicht, ob dies Auswirkungen auf die Leistung hat. Ich weiß es leider nicht entweder, aber ich denke, dass es der richtige Weg ist, die Dinge auf organisierte Weise zu erledigen (vielleicht haben Sie einen besseren Weg).
Mein Verständnis:
1. Anzeigeattribute: display||visibility||list-style(list-style-type, list-style-image, list-style-position)||overflow
2. Positionierungs- und Floating-Attribute: position||top||right||bottom||left||float||clear
3. Box-Modell: width||height||margin||padding||border
4. Hintergrund: Hintergrund (Hintergrundbild, Hintergrundposition, Hintergrundwiederholung, Hintergrundanhang)
5. Textattribute: Schriftart||Schriftart||Schriftstärke||Schriftgröße | |font-family||color
6. Textattribute: text-indent||text-align||vertical-align||letter-spacing||word-spacing||text-transform||text-decoration| text-shadow
7. Andere
Zitieren Sie jemanden: „Ob Sie diese Reihenfolge verwenden oder nicht, ich verwende sie trotzdem.“ Eventuelle Korrekturen sind willkommen