Heim  >  Artikel  >  Web-Frontend  >  Firefox empfiehlt und persönlich versteht CSS-Schreibreihenfolge_CSS/HTML

Firefox empfiehlt und persönlich versteht CSS-Schreibreihenfolge_CSS/HTML

WBOY
WBOYOriginal
2016-05-16 12:11:281185Durchsuche

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn