Eric, wieder mal ohne Umschweife mit Blogpost-Titeln. Das bin ich
Die gebräuchlichste Technik zur Organisation von CSS-Deklarationen, die mir begegnet, ist überhaupt keine.
Fast gar keine, jedenfalls. Ich neige dazu, sie nach dem zu gruppieren, was mir beim Schreiben einfällt, was normalerweise zu einigermaßen logischen Gruppen führt, wie z. B. Box-Modell-Elemente, die zusammen gruppiert sind, und Farbstoffe, die zusammen gruppiert sind. Es ist mir einfach... egal. Aber das wird stark davon beeinflusst, dass ich typischerweise in kleinen Teams oder alleine arbeite. Eric empfiehlt den alphabetischen Ansatz, weil
[…] er dem Team eine grundlegende Struktur auferlegt. Diese Anforderung ist meistens ausreichend, besonders wenn sie bedeutet, das Vorherige aufzuräumen.
Und sein (wahrscheinlich wichtigerer) Punkt ist, dass die vermittelte Struktur CSS in einer Welt legitimiert, in der CSS-Kenntnisse unterbewertet werden. Dagegen werde ich nichts einwenden, aber ich würde argumentieren, dass das manuelle Alphabetisieren von CSS in einem bestehenden Projekt sehr wahrscheinlich keine gute Zeitverschwendung ist. Schlimmer noch, es könnte Dinge brechen, wenn es blind durchgeführt wird, weshalb Prettier darauf verzichtet hat. Wenn Sie und Ihr Team zustimmen, dass dies eine gute Idee ist, würde ich einen Weg finden, dies in eine On-Save-Funktion in Ihrem Code-Editor zu integrieren und es zu einem Pre-Commit-Hook zu machen. Das Alphabetisieren ist eine Aufgabe für Computer, und die Ausgabe kann während der Erstellung überprüft werden.
VSCode hat einen Befehl dafür: Lines Ascending Sortieren.
Binden Sie ihn einfach an eine Taste, wählen Sie die Deklarationen aus und sortieren Sie sie. Es ist semi-automatisch, aber Sie müssen nicht das gesamte Projekt aktualisieren.
Wahrscheinlich fehlt mir etwas :-) – aber fehlt in diesem Artikel etwas?
Das bezieht sich nur auf "ABCSS" (alphabetische Sortierung), oder?
Ich frage, weil das so alt ist. (CSS Tricks ist normalerweise neu :-)
Ich habe gegoogelt und es gibt viele Leute, die früher darüber geschrieben haben
Zur Sortierung von Deklarationen in CSS (2014)
Alphabetisieren Sie Ihre CSS-Eigenschaften, zum Teufel noch mal (2017)
Eine einfache Regel, um Ihr CSS richtig zu organisieren (2019)
Was macht Eric besonders?
Vorschlag: ein Artikel über die Geschichte der CSS-Sortierung mit Anerkennung für all diese Leute?
Ich kann mich irren und/oder nicht mehr auf dem neuesten Stand sein, aber ich habe das Gefühl, dass alphabetisch sortierte CSS-Regeln auch schneller geparst werden. Nicht auf sinnvolle Weise, wir reden von Millisekunden höchstens, aber wenn Sie einen Weg brauchen, es Ihrem Chef zu rechtfertigen, können Sie dieses Detail weglassen :D
Quelle dazu? Nach allem, was ich über Parsing weiß, klingt das nicht richtig.
Alphabetisierung fühlt sich *richtig* an, kann aber tatsächlich negative Auswirkungen auf die Kompressionsraten von GZIP/Brotli haben, indem die Länge wiederholter Segmente im gesamten Dokument verkürzt wird.
Zum Beispiel gruppieren die meisten Leute, die einem einfachen Brain-Dump-Ansatz folgen, logisch zusammengehörige Regeln, wie Breite und Höhe oder Margin und Padding.
In einem gegebenen Stylesheet ist die Wahrscheinlichkeit, dass mehrere Blöcke die gleiche Breite und Höhe haben – z. B.
width:100%;height:auto– ziemlich hoch. Encoder erkennen das und tokenisieren das gesamte Paar.Aber wenn Sie alles alphabetisieren, bleiben solche gemeinsamen Paare nur in Klassen gemeinsame Paare, die keine anderen Definitionen zwischen H und W haben.
Genau das, was mir zuerst in den Sinn kam, als ich das gelesen habe!
Wie beiläufig erwähnt, ist es gefährlich, dies automatisch zu tun, da die Reihenfolge der CSS-Deklarationen beeinflusst, welche angewendet wird. Wie oft haben wir so etwas getan?
Was ist, wenn das Alphabetisieren dieser beiden Zeilen dazu führt, dass die Reihenfolge umgekehrt wird? Können wir sicher sagen, dass dies niemals der Fall sein wird? Gibt es keinen Alphabetisierungsalgorithmus auf der Welt, der das Minuszeichen zuerst sortiert?
Es fühlt sich einfach zu fragil an, um sich auf Automatisierung zu verlassen. ¯_(ツ)_¯
Meine Meinung auch. Zuerst klingt es nett, aber da CSS kaskadierend ist, sind Sie möglicherweise gezwungen, einige Deklarationen nicht alphabetisch zu haben.
Wie wäre es damit..
animation: spin 2s linear 3;-webkit-animation: spin 2s linear 3;
Hoffentlich ist Code wie dieser niemals der Fall!
Deklarationen alphabetisch zu sortieren ist totaler Wahnsinn, ich will gar nicht erst über die Kaskade und die Auswirkungen der Sortierwahl nachdenken...
Ich habe versucht, den alphabetischen Ansatz in einem großen Projekt zu verfolgen, und ein großes Problem, das ich dabei gefunden habe, ist, dass es oft schwierig wird, den Code erneut zu lesen, da die Augen über den Regelsatz springen müssen, um zu versuchen, den *kumulativen* Effekt einer Reihe miteinander verbundener Eigenschaften zu verstehen.
Zum Beispiel ist
align-itemsfür sich genommen bedeutungslos, außer für ein Grid oder Flex, und mit Alphabetisierung gibt es auch die anderen A's sowie B- und C-Eigenschaften dazwischen unddisplay. Wenn ich oder jemand anderes in meinem Team einen Regelsatz durchsehe, habe ich einfach das Gefühl, dass mehr kognitiver Aufwand erforderlich ist, um zu verfolgen, welche Eigenschaften zusammenwirken, um einen bestimmten Effekt zu erzielen.Die Konvention, auf die ich mich geeinigt habe, ist, Eigenschaften grob nach Abhängigkeit oder Relevanz aufzulisten.
display: flex; align-items: center, oderposition: sticky; top: 0(obwohl das alphabetisch ist, lol). Ich gruppiere auch Dinge wieanimationundtransition, da sie verwandt, aber alphabetisch weit voneinander entfernt sind. Und ich behalte oft auch die Eigenschaften, die durch eine Animation oder Transition geändert werden, in der Nähe, wie z. B.transformoderopacity.Mir gefällt Ihre Idee, Dinge einfach so aufzulisten, wie sie aus Ihrem Gehirn herauskommen, weil ich denke, dass das Gehirn von Natur aus nach Wichtigkeit organisiert. "Oh, ich brauche einen Flex-Container mit „space-between“-Justierung und einem Abstand" ->
display: flex; justify-content: space-between; gap: 1rem. Weit außerhalb der alphabetischen Reihenfolge, aber für das Gehirn leichter zu verstehen, auf eine gerüstete Weise, wenn man zurückliest. Zumindest meiner Meinung nach.Persönlich mag ich keine alphabetische Sortierung, da ich die Idee nicht mag, bestimmte Eigenschaften zu trennen, die zusammengehören sollten.
Aber ich verstehe, warum es in Teams hilft, da es mehr Konsistenz bringt.
Glücklicherweise folgt unser Team der Box-Modell-Reihenfolge. Sie ist für andere im Team und für Neulinge erklärbar, da der Browser Ihr Spickzettel ist.
Haben wir Awesome Style Lint schon in Betracht gezogen... Es tut eine ganze Menge und Sie können sogar Ihr eigenes Muster per Regex erstellen, damit padding-right nie vor padding kommt usw.
Ich glaube nicht, dass das eine gute Idee ist. Ich denke, wir sollten unser CSS abschnittsweise organisieren. Weil es einfacher wäre, Ihr CSS zu bereinigen, wenn Sie einige Abschnitte entfernen. Andernfalls müssen Sie die Klassen einzeln finden oder Sie haben unnötigen Schrott-CSS. Es ist überhaupt keine gute Idee. Es gibt keinen Sinn, CSS alphabetisch zu organisieren. Ich finde es völlig nutzlos.
Nein, nein, nein! Gruppierte Reihenfolge ist viel besser, z. B. diese hier
Die Tatsache, dass in CSS bei Regeln mit gleicher Spezifität die Reihenfolge der Deklaration das Ergebnis beeinflusst, muss berücksichtigt werden. Es mag am besten sein, dass Ihr CSS in beliebiger Reihenfolge ausgeführt werden kann – aber trotzdem ist ein Teil der Kaskade DIE Reihenfolge der Deklaration.
Während das Alphabetisieren von Style Sheets sie leichter durchsuchen lässt, kann es auch viele andere, möglicherweise unnötige Einschränkungen für die Deklaration Ihrer Selektoren, Ihres HTML oder sogar die Benennung Ihrer Klassen auferlegen.
Folgeartikel: Wie man Klassen logisch benennt.
Da ich einen Blogbeitrag zu diesem Thema im Entwurfsordner habe, hier meine kleine Liste der Vorteile der alphabetischen Reihenfolge. Beachten Sie, dass dies aus der Sicht von jemandem geschrieben ist, der an einer großen Codebasis arbeitet, an der über 15 Entwickler kontinuierlich mitwirken.
Demokratisch: Die Wahl der alphabetischen Reihenfolge bedeutet, dass die willkürlichen Vorlieben von jemandem *nicht* ausgewählt werden (siehe auch der letzte Punkt unten).
Konsistenz: Die Verwendung derselben Reihenfolge in der gesamten Codebasis macht den Code vorhersehbar und erleichtert das Auffinden bestimmter Werte, sobald Sie wissen, wo Sie suchen müssen.
Einfach zu automatisieren: Wenn Sie Stylelint verwenden, können Sie die Reihenfolge mit Hilfe des stylelint-order Plugins erzwingen. Und es gibt Möglichkeiten, die Reihenfolge mit Tastenkombinationen in VS Code und Webstorm/IntelliJ zu verknüpfen.
Für neue Kollegen leicht zu verstehen: Ähnlich wie beim ersten Punkt hilft die Anwendung der alphabetischen Reihenfolge beim Onboarding neuer Kollegen, da die meisten Leute das Alphabet auswendig können. Bei den meisten anderen Sortierschemata müssten Sie es auswendig lernen, was die kognitive Belastung erhöhen würde.
Kein/weniger Bikeshedding: Die meisten anderen Sortierschemata beinhalten unterschiedliche Grade persönlicher Meinungen. Nach der anfänglichen Arbeit, Regeln für die Gruppierung von Eigenschaften und die Reihenfolge der Gruppen festzulegen, müssten Sie dieses Meeting jedes Mal wieder besuchen, wenn eine neue Eigenschaft (oder Gruppe von Eigenschaften) in die Codebasis aufgenommen wird. Und wenn Sie mehr als ein paar Entwickler im Team sind, ist es wahrscheinlich, dass alte Entscheidungen über die Reihenfolge wieder auf den Tisch gelegt werden, um neu bewertet zu werden. Bei der alphabetischen Reihenfolge sind solche Diskussionen nicht erforderlich, da die Reihenfolge durch etwas Universelles und Außerhalb der Hand der Entwickler bestimmt wird.
Zuerst mag es sich etwas seltsam anfühlen, sich auf etwas zu verlassen, das nicht auf etwas basiert, das Sie selbst entschieden haben, aber ähnlich wie bei der Übernahme von Prettier, sobald Sie sich dafür entschieden haben, ist es eine Wohltat, nicht über die Reihenfolge der Eigenschaften nachdenken oder diese begründen zu müssen und das Werkzeug die Arbeit für Sie erledigen zu lassen.
Während die logische Gruppierung von zusammengehörigen Selektoren *wie die offensichtliche Wahl erscheint (und glauben Sie mir, es fühlt sich seltsam an,
align-itemsvordisplayzu stellen)* und während die Art und Weise, wie wir gruppieren, leicht zu einer Art Regel gemacht werden kann, wäre eine solche Regel immer noch sehr meinungsabhängig und würde viel Raum für Interpretation und Missverständnisse lassen ("Warum ist die Box-Modell-Gruppe nicht zuerst?", "Wie sortieren wir einzelne Eigenschaften innerhalb der Gruppen? Oder vielleicht nicht?"). Das ist natürlich in Ordnung, wenn Sie dies für ein persönliches Projekt oder für ein Projekt entscheiden, bei dem die Anzahl der Mitwirkenden klein ist und die Entwickler eine homogene Ansicht darüber haben, wie es funktionieren soll. Aber für größere Projekte und Unternehmensanwendungen, bei denen die Anzahl der Entwickler höher ist und die Codebasis über einen längeren Zeitraum gepflegt werden muss, häufen sich solche Fragen. Und obwohl es zuerst wie eine wichtige Entscheidung erscheinen mag, wollen Sie wirklich nicht immer wieder dieselbe Diskussion führen, sobald Sie sich auf eine Lösung geeinigt haben.In einer perfekten Welt würde ich mich für logische Gruppierung entscheiden. Aber da... wissen Sie (winkt wild um mich herum), ist mein pragmatischer Ansatz, die zweitbeste Option zu wählen, und das ist die alphabetische Reihenfolge.
Ich mag die Art und Weise, wie die Chrome-Entwicklertools Eigenschaften im Computed Style Panel gruppieren; Layout, Text, Darstellung.
Ich habe schon immer etwas Ähnliches gemacht, bevor die Leute mir sagten, ich solle dies oder jenes tun.
Als Freiberufler passt sich jedes Projekt heutzutage dem Ansatz von jemand anderem für jeden Tastendruck, jeden Pull Request, zu viele/zu wenige Kommentare an... Gähn.