Hier ist ein bisschen CSS
.module {
background: rgba(198, 148, 72, 0.75);
color: #222;
clear: both;
margin: 0 0 2rem 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border: 2px solid black;
border-radius: 4px;
padding: 1rem;
font-family: sans-serif;
font-size: 0.9rem;
line-height: 1.4;
opacity: 1;
transform: opacity 0.2s ease-in-out;
transform-origin: right center;
}Das sieht sehr nach CSS aus, das ich schreibe. Ich gebe zu, ich hatte traditionell keine große Meinung zur Reihenfolge von CSS-Eigenschaften. Ich füge einfach hinzu, was ich brauche. Ich glaube, sie landen größtenteils „gruppiert“ nach verwandten Dingen, weil das einfach so aus meinem Gehirn kommt.
Auch wenn mir diese „zufällige“ (keine wirkliche Logik angewendet) Anordnung nicht besonders ausmacht, kann ich Argumente dagegen sehen. Wenn es eine doppelte Deklaration gäbe, wäre sie schwer zu erkennen und könnte zu mühsamer Fehlersuche führen. Das ist mir schon oft passiert, wenn ich jetzt darüber nachdenke.
Ich gebe auch zu, dass ich einige Stilrichtlinien-Präferenzen habe, wie z. B. 2 Leerzeichen, Leerzeichen vor der öffnenden Klammer, ein Leerzeichen nach Doppelpunkten und Dinge dieser Art. Das ist ein anderes Thema.
Schauen wir uns einige Möglichkeiten an, wie wir dieser Regel unterschiedliche Logik anwenden könnten.
Alphabetisch
Ordnen wir sie alle alphabetisch neu an
.module {
background: rgba(198, 148, 72, 0.75);
border: 2px solid black;
border-radius: 4px;
clear: both;
color: #222;
display: flex;
flex-direction: column;
font-family: sans-serif;
font-size: 0.9rem;
line-height: 1.4;
margin: 0 0 2rem 0;
opacity: 1;
overflow: hidden;
padding: 1rem;
position: relative;
transform: opacity 0.2s ease-in-out;
transform-origin: right center;
}Hier wird ein wenig Logik angewendet. Wenn Sie speziell nachsehen möchten, ob diese Deklaration den Eigenschaftsnamen opacity hat, können Sie sie durchsuchen, um zu finden, wo „o“ alphabetisch in der Liste steht, und sie idealerweise sehr schnell finden. Sie müssen darauf vertrauen, dass das alphabetische Format perfekt eingehalten wird, aber ich kann die Anziehungskraft erkennen.
Jerry Low ist ein großer Verfechter
Das Alphabet hat eine universell verstandene Reihenfolge. Die meisten von uns können Dinge wahrscheinlich alphabetisch ordnen, ohne unsere Gehirne zu überlasten… Die Geschwindigkeit und die eindeutige Reihenfolge sind ein stark genug Argument für die Alphabetisierung Ihrer CSS-Eigenschaften, aber für mich ist der größte Vorteil die Zusammenarbeit – der geringe Lernaufwand.
Sie erhalten auch einige natürliche Gruppierungen. Beachten Sie, dass die Schrifteigenschaften zusammen und die Transformationseigenschaften zusammen sind, allein durch ihre Benennung. In einem glücklichen Zufall liegen die Flexbox-Sachen auch nebeneinander, aber wenn Sie eine filter- oder fill-Eigenschaft dazwischen schieben, wären sie es nicht. Einige Dinge, die Sie nebeneinander erwarten würden, wie margin und padding, sind es nicht. Was uns zu…
Nach Typ gruppiert
Wie wir gesehen haben, geschieht die „Typ“-Gruppierung natürlich, ein wenig, wenn man alphabetisch vorgeht. Aber es gibt viele Ausnahmen, daher könnte es sinnvoll sein, Eigenschaften danach zu gruppieren, was sie tun, anstatt wie sie heißen. Ich habe „Typ“ in Anführungszeichen gesetzt, denn wie wir Eigenschaften in Typen gruppieren, liegt ganz bei uns, es ist kein semantisches oder programmatisches Konzept.
Mit einigen Leerzeilen zur Trennung der Typen, vielleicht landen wir so
.module {
background: rgba(198, 148, 72, 0.75);
color: #222;
opacity: 1;
border: 2px solid black;
border-radius: 4px;
font-family: sans-serif;
font-size: 0.9rem;
line-height: 1.4;
position: relative;
display: flex;
flex-direction: column;
clear: both;
overflow: hidden;
margin: 0 0 2rem 0;
padding: 1rem;
transform: opacity 0.2s ease-in-out;
transform-origin: right center;
}Dann stellt sich die Frage: Wie ordnet man die Gruppierungen von Typen an? Was kommt in welchen Typ? Wie ordnet man die Eigenschaften innerhalb jedes Typs? Diese Fragen müssen nicht unbedingt beantwortet werden, sie sind nur Denkanstöße.
Michael Arestad, der sich nicht viel darum kümmert, wie man Eigenschaften anordnet, sagt
Normalerweise werden Positionierungs-, Boxmodell- und Typografie-Eigenschaften auch ohne Schulung schön gruppiert.
Aber er macht deutlich, dass dieses „Lesbarkeits“-Zeug keine so gute Argumentation ist
Leichte Lesbarkeit ist für mich eine Strohmann-Argumentation. Sie lässt sich leicht umwerfen, weil alles, was zählt, die leichte Auffindbarkeit einer Eigenschaft ist. Mit beiden Methoden ist das genauso einfach und in meiner Erfahrung beginnt es häufiger im Browser.
Nach Zeilenlänge
Willst du verrückt werden? Mehr Leute als du denkst machen das
.module {
background: rgba(198, 148, 72, 0.75);
transform: opacity 0.2s ease-in-out;
transform-origin: right center;
border: 2px solid black;
font-family: sans-serif;
flex-direction: column;
margin: 0 0 2rem 0;
position: relative;
border-radius: 4px;
font-size: 0.9rem;
overflow: hidden;
line-height: 1.4;
display: flex;
padding: 1rem;
color: #222;
clear: both;
opacity: 1;
}Ich möchte nicht unhöflich sein, den Codierungsstil anderer Leute als seltsam zu bezeichnen, aber für mich scheint dies Ausdruck davon zu sein, zwanghaft etwas um der Sache willen zu tun. Es gibt keine Vorteile, die ich sehen kann, außer dass es irgendwie ordentlich aussieht. Allerdings gibt es viele Nachteile, z. B. kann das Ändern eines Wertes erfordern, dass Sie ihn neu ordnen müssen.
CSS Comb
Es lohnt sich, CSS Comb zu erwähnen, ein Projekt, das Ihre CSS-Eigenschaften als seinen Standard-Out-of-the-Box-Zweck organisiert.
Es ist auch extrem konfigurierbar. Sie haben ein 24-stufiges Konfigurationstool, um die Dinge genau nach Ihren Wünschen zu gestalten. Ich muss sagen: Das reizt mich. Tatsächlich habe ich gerade meine eigene neue Konfiguration erstellt und plane, diese zu verwenden. Es scheint besonders gut in einer Teamumgebung zu sein. Auf diese Weise erhalten Sie den Vorteil einer logischen Ordnung (wenn es denn eine gibt!), plus einen konsistenten und erzwungenen Code-Stil, für fast keine Mühe.
Es gibt auch ein PostCSS-Plugin. Aber denken Sie daran, es spielt keine Rolle, wie Ihre *verarbeitete* CSS-Datei aussieht, wir sprechen hier über die Verarbeitung unserer geschriebenen Stylesheets, daher macht es als In-IDE-Ding (was dieses Plugin bietet) wahrscheinlich am meisten Sinn.
Andere
Kennen Sie weitere Möglichkeiten, Ihre Eigenschaften zu organisieren? Wie wäre es mit „zuletzt hinzugefügt, nach Datum“? In der Reihenfolge, wie sehr Sie die Eigenschaft mögen?! Wie wichtig Sie die Eigenschaft einschätzen??!!