Share
Dieser Artikel beschäftigt sich mit der CSS-Codestruktur - insbesondere mit einer Methode, die ich in den letzten Jahren verwendet habe, um der Reihenfolge, in der ich mein CSS schreibe, etwas Logik und Konsistenz zu verleihen. Es ist eine Methode, die ich "Outside In" nenne..
Ich habe in der Vergangenheit von verschiedenen Ansätzen zum Schreiben von CSS gehört. Einige Leute verwenden überhaupt keine bestimmte Reihenfolge, andere alphabetisieren die Deklarationen nach Eigenschaftsnamen. Ich habe sogar von einer Handvoll Fällen gehört, in denen einige sie visuell nach Länge sortieren Eigentumswert Paar!
Bei einer früheren Umfrage zu CSS-Tricks stellte sich diese Frage mit einem Ergebnis, das ich ziemlich überraschend fand: 39% von über 11.000 Menschen haben keinen konkreten Plan für die Bestellung von CSS.
Wie bestellen Sie Ihre CSS-Eigenschaften? Gesamtzahl der Wähler: 11.093Eine Gruppierung nach Typ könnte darauf hindeuten Höhe neben sein Breite. In alphabetischer Reihenfolge werden die Deklarationen von angezeigt Hintergrund durch zu z-index, zum Beispiel.
Ich benutze die Methode zum Gruppieren von Eigenschaften nach Typ - obwohl ich sogar eine bestimmte Reihenfolge für die Sortierung nach Gruppe benutze!
Mit Ausnahme der „Zufallsmethode“ gibt es bei allen anderen Ansätzen eine gewisse Ordnung. Diese Reihenfolge ist jedoch nicht unbedingt auf etwas besonders Nützliches in Bezug auf die Gestaltung von Websites zurückzuführen.
Wenn Sie Daten über die Höhe der Schüler in einem Klassenzimmer erhoben haben, ist es sinnvoll, sie anhand einer Längenmessung zu ordnen. Wenn Sie eine Sammlung von DVDs kategorisieren, kann eine alphabetische Reihenfolge sinnvoll sein. Aber hätten CSS-Eigenschaften, die auf diese Weise angeordnet wurden, etwas mit ihrer Reihenfolge zu tun? Bedeutung wenn diese Stile vom Browser gezeichnet werden?
Wenn Sie alphabetisch sortieren, ist dies ein Element Farbe wichtiger als sein Breite? Ist ein Element Grenzstil wichtiger als ob es im normalen Fluss des Dokuments ist oder nicht? Ich würde nicht sagen.
Die Methode, die ich zu schätzen gelernt habe, ordnet die CSS-Eigenschaften dadurch an, wie stark sie die ausgewählten Elemente oder andere Elemente beeinflussen. Der Kern der Technik besteht darin, mit großen Eigenschaften zu beginnen, die sich auf Elemente außerhalb des Elements auswirken und auf die feineren Details einwirken. Deshalb nenne ich es "Outside In" -Methode.
Position und schweben Deklarationen entfernen Elemente aus ihrem normalen Fluss und haben einen großen Einfluss auf andere Elemente um sie herum. Dies ist etwas Wichtiges, und ich denke, es sollte ganz oben in einem CSS-Block deutlich gemacht werden.
Dinge wie das kontrollieren Mauszeiger oder Überlauf eines Elements sind (in der Regel) weniger wichtig und deshalb neige ich dazu, solche Dinge gegen Ende zu lassen.
Die Reihenfolge, die ich benutze, lautet wie folgt:
Accentsconagua
Position, schweben, klar, Anzeige)Breite, Höhe, Spanne, Polsterung)Farbe, Hintergrund, Rand, Box Schatten)Schriftgröße, Schriftfamilie, Textausrichtung, Text-Transformation)Mauszeiger, Überlauf, z-index)ich weiß das Rand ist eine Boxmodelleigenschaft und z-index ist auf Position bezogen, aber diese Reihenfolge funktioniert für mich. Obwohl ich keine alphabetische Reihenfolge mag, gibt es etwas, das sich beim Putten richtig anfühlt z-index Am Ende…
Nehmen wir als Beispiel das Styling eines Tastenmoduls.
Beginnen wir mit einem schönen, aussagekräftigen Klassennamen .Taste. Ich persönlich mag keine vertraglich vereinbarten Namen .btn und neigen dazu, möglichst lange beschreibende Klassennamen zu bevorzugen - es ist nur eine persönliche Präferenz, YMMV :)
/ * Jetzt bestellen → * / .button
Wir möchten in der Lage sein, den vertikalen Abstand um die Schaltfläche herum zu manipulieren Anzeige von in der Reihe (Standardeinstellung für Ankerverbindungen) bis Inline-Block.
Um zuzulassen, dass die Schaltfläche je nach Textinhalt breiter wird, Inline-Block ist eine flexiblere Wahl als schweben mit einer Breite einstellen.
.Taste Anzeige: Inline-Block;
Als Nächstes müssen wir einige Kastenmodellmerkmale wie Rand und Polsterung hinzufügen. Margin geht aus der Box, also nach "Outside In", dies sollte zuerst kommen.
.Taste Anzeige: Inline-Block; Marge: 1em 0; Polsterung: 1em 4em;
Als Nächstes fügen Sie die Farben hinzu. Um jede Gruppe von Eigenschaftstypen voneinander zu trennen, lasse ich gerne eine leere Zeile. Dadurch wird jeder Abschnitt deutlich hervorgehoben.
.Taste Anzeige: Inline-Block; Marge: 1em 0; Polsterung: 0.5em 3em; Farbe: #fff; Hintergrund: # 196e76;
Als Nächstes können wir die Ränder und Schatten hinzufügen, um Tiefe zu verleihen, gefolgt von beliebigen Typografie-Eigenschaften, die wiederum durch eine Leerzeile getrennt sind.
.Taste Anzeige: Inline-Block; Marge: 1em 0; Polsterung: 1em 4em; Farbe: #fff; Hintergrund: # 196e76; Grenze: 0,25 em fest # 196e76; Box-Schatten: Einfügung 0.25em 0.25em 0.5em rgba (0,0,0,0.3), 0.5em 0.5em 0 # 444; Schriftgröße: 3em; Schriftfamilie: Avenir, Helvetica, Arial, serifenlos; Text ausrichten: Mitte; Text-Transformation: Großbuchstaben; Textdekoration: keine;
Ein Vorteil eines solchen Systems ist, dass es nach der Implementierung nicht mehr zu viel Nachdenken erfordert. Wenn ich meinen Code durchsehe und etwas großes Bild wie ein Element ändern möchte Breite oder Position, Ich weiß, dass ich auf eine Regel nach oben schauen werde. Wenn ich sowas einstellen möchte Text-Transformation oder Listenstil, Ich werde nach unten schauen.
Den Code so zu strukturieren, ist auch für andere, die das CSS lesen, eine echte Hand. Wenn der Code so angeordnet ist, ist es sehr einfach, alle Komponenten eines Tastenmoduls zu sehen. Beim Schreiben von Code ist es wichtig, den anderen Entwicklern das Lesen so einfach wie möglich zu machen. Dies macht den Code verständlicher und einfacher zu verwalten.
Ich habe Vanilla-CSS verwendet, um meine Methoden hier zu erläutern, aber Sie können den "Outside In" -Ansatz genauso effektiv in Ihrem Sass, LESS und Stylus anwenden.
Das Codieren kann eine sehr persönliche Sache sein. Wenn Sie eine andere Methode zum Organisieren von CSS verwenden, wäre es schön, davon zu erfahren! Hinterlasse einen Kommentar, um die Diskussion fortzusetzen.
