Zuallererst ist dies also kein gewöhnlicher Kampf. Es geht nicht um CSS gegen CSS-in-JS , nicht um atomic CSS gegen BEM , nicht um LESS gegen SASS . In diesem Kampf geht es um DIE ORDNUNG.
Dieser Kampf findet zwischen ORDER und CHAOS statt. Und zwischen BESTELLUNG und ... einer weiteren BESTELLUNG. Kurz gesagt - über eine bessere Möglichkeit, CSS- Eigenschaften zu sortieren. Nicht mehr und nicht weniger.
Kurz gesagt - es gibt drei Möglichkeiten, dies zu tun:
- Tu es nicht. Schreiben Sie ein beliebiges CSS. Dies ist der beliebteste Weg
- Gruppieren Sie die Eigenschaften nach Sinn. Stellen Sie einfach ein paar Sachen zusammen. Dies ist ein sehr beliebter Weg.
- Ordnen Sie alle Eigenschaften alphabetisch. Der einfachste, aber weniger beliebte Weg.
Vergessen wir von nun an den ersten Weg. Es ist nicht der Weg.
2012
Es gab eine gute Umfrage von CSS-Tricks , und hier sind die Ergebnisse:
Es ist schon 2019, was wurde geändert?
Der Unterschied zwischen alpha sort , ABCSS und einer grouping ist recht gut, aber es ist besser, dies klar zu machen
Ausgangszustand
Beginnen wir mit einem idealen CHAOS aus dieser schöneren Ausgabe
.wrapper { top: 20px; margin-left: 20px; display: flex; position: absolute; height: 100%; margin-bottom: 20px; border-radius: 5px; color: red; justify-content: center; margin-left: 2px; left: 0px; width: 100%; border: 1px solid red; }
Schön? So sieht CSS nach einigen Jahren ohne Kontrolle aus.
ABCSS
Sortieren Sie es alphabetisch
.wrapper { border: 1px solid red; border-radius: 5px; color: red; display: flex; height: 100%; justify-content: center; left: 0px; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; position: absolute; top: 20px; width: 100%; }
Es hat nur geholfen zu bemerken, dass wir zwei margin-lefts . Es wäre einfacher, beim nächsten Mal eine neue Eigenschaft hinzuzufügen, insbesondere wenn die gesamte Sortierung automatisch auf stylelint Ebene erfolgt.
Der Hauptvorteil der alphabetischen Sortierung - einfache Standortbestimmung. Sie scannen nur eine Tabelle, wie ein Glossar, und ja, hier ist die Eigenschaft, die ich suche.
Der Hauptnachteil - height geht vor width , left geht vor top und es gibt einen gewissen Abstand zwischen ihnen. Die alphabetische Sortierung mischt den Kontext .
Ich habe ein Online-Tool verwendet, um es zu machen. Die Vielzahl an Online-Tools, Plugins für IDEs und CLI-Tools unterstützt die sofortige Alpha-Sortierung. - einfach zu bedienen.
Gruppen
Sortieren Sie es in Gruppen
.wrapper{ position: absolute; top: 20px; left: 0; display: flex; justify-content: center; width: 100%; height: 100%; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; color: red; border: 1px solid red; border-radius: 5px; }
Dieses Mal geht es mehr um die separation of concerns - alle Eigenschaften werden durch einen Sinn in Buckets gruppiert (gruppiert). Das Bestellprinzip ist als "Outside-In" bekannt.
- Layout-Eigenschaften (Position, Float, Löschen, Anzeigen)
- Eigenschaften des Boxmodells (Breite, Höhe, Rand, Polsterung)
- Visuelle Eigenschaften (Farbe, Hintergrund, Rand, Kastenschatten)
- Typografieeigenschaften (Schriftgröße, Schriftfamilie, Textausrichtung, Texttransformation)
- Verschiedene Eigenschaften (Cursor, Überlauf, Z-Index)
Und das Problem - es gibt mehr als einen Standard . Konkreter sein - mehr als fünf. Und das ist ein Problem. Oder nicht?
Und noch einmal - die Sortierung erfolgt diesmal mit einem Tool, CSSCOMB .
Der Hauptvorteil - alle Eigenschaften sind nach gesundem Menschenverstand gruppiert. Alle Flex-Eigenschaften - zusammen. Alle Positionen, links, rechts, oben, unten - zusammen.
- Wenn Sie etwas hinzufügen müssen, fügen Sie es irgendwo hinzu und lassen Sie ein Werkzeug die Arbeit erledigen.
- Wenn Sie etwas finden müssen - suchen Sie nach einer Gruppe, dann schauen Sie in eine Gruppe. Übrigens - dies ist viel schneller als eine lineare Suche in einem früheren Fall.
Dies bedarf einiger Klarstellung:
- mit Alpha-Sortierung - Sie suchen nach einem Zeilenanfang, der auf den Anfang und das Ende von "Ihrem" Anfangsbuchstaben zeigt. Dann denken Sie an diesen Unterblock und das ist erledigt. Das ist im Grunde O (n). Nach einigem Training - O (n / 2), solange Sie wissen, "wo" Sie nach einer Requisite suchen.
- Bei der Gruppensortierung - Sie wissen, "wo" Sie nach einer Requisite suchen müssen - haben Gruppen eine konstante Position und gehen dann eine kleine Teilmenge durch, und das ist erledigt. Das ist im Grunde - O (3), nicht "n".
Der Hauptnachteil - Sie müssen lernen, wie man Bedenken trennt. 99% der Befragten gaben an, dass dies ein großes Problem ist - das Schreiben von gruppiertem CSS, aber es ist ein Werkzeugjob, nicht Ihr Job. Und ja, es gibt mehr als einen Standard, aber es ist kein Problem, wenn die Bestellung über ein Tool erfolgt.
Die Umfrage
Also habe ich einige Nachforschungen über dieses Problem angestellt.
- 2012y, CSS-Tricks berichtet, 45% Entwickler verwenden Gruppen, 14 - Alpha-Sortierung, 39 verwenden nichts
- Umfrage erstellt heute (und noch nicht abgeschlossen) - 50% für Gruppen, 25% für Alpha, 25% verwenden nichts
Beste Gründe für die Verwendung von Gruppen:
- Gruppen sind die natürlichste Art, Dinge zusammenzusetzen: So schreiben Sie sie. Stellen Sie sich vor, Sie müssten Wörter in einem Satz in alphabetischer Reihenfolge schreiben. Oben, rechts, unten, links gehören natürlich zusammen, genau gleich nach der Position: absolut ( Twitter ).
- Ein guter Grund für Gruppen könnte atomares CSS sein - Atom / Nutzen sind normalerweise an eine einzige "Gruppe" gebunden, dies ist ein natürlicher Weg für funktionale Frameworks. "Normales" CSS könnte also wie kombinierte Atome aussehen - dh gruppiert ( Twitter ).
- Kleinere Teams ziehen es möglicherweise vor, verwandte Eigenschaften (z. B. Positionierung und Box-Modell) zu idiomatischen CSS zusammenzufassen .
- Für beide Wege gibt es Vor- und Nachteile. Einerseits ist die alphabetische Reihenfolge universell (zumindest für Sprachen, die das lateinische Alphabet verwenden), sodass es kein Argument dafür gibt, eine Eigenschaft vor einer anderen zu sortieren. Es erscheint mir jedoch äußerst seltsam, Eigenschaften wie unten und oben nicht direkt nebeneinander zu sehen. Warum sollten Animationen vor dem Anzeigetyp angezeigt werden? Es gibt viele Kuriositäten bei der alphabetischen Reihenfolge. Andererseits ist es durchaus sinnvoll, Eigenschaften nach Typ zu ordnen. Alle schriftbezogenen Erklärungen werden gesammelt, oben und unten werden wieder vereint, und das Lesen eines Regelsatzes fühlt sich an wie das Lesen einer Kurzgeschichte. SASS-Leitfaden .
- gruppensortierte Dateien sind nach gzip um 2% kleiner. Magie In diesem Artikel werden 5 verschiedene Möglichkeiten zum Bestellen von CSS-Requisiten vorgestellt. studieren
Einige Gründe, nicht zu verwenden
- "Gruppen" ist großartig, wenn es für alle das Gleiche bedeutet. Normalerweise nicht. Sie könnten wahrscheinlich die Durchsetzung von Gruppierungen automatisieren und dann sind Sie quadratisch. Twitter
- Größere Teams bevorzugen möglicherweise die Einfachheit und Wartungsfreundlichkeit der alphabetischen Reihenfolge. wieder idiomatic-css
Gründe für die alphabetische Verwendung:
- Früher habe ich nach "Gruppe" gearbeitet, aber es ist zu subjektiv. Außerdem gibt es viele Addons zum Alpha-Sortieren einer Reihe von Zeilen. Auch der berechnete Stil der Chrome Dev-Tools ist Alpha.
- alphabetisch. Alles andere bedeutet, dass jeder, der in das Projekt kommt, auch Ihr Muster lernen muss.
- Meine eigene Firma verwendet Alpha-Sortierung (das war eine Überraschung für mich).
- Google CSS Guide empfiehlt ABCSS ohne Erklärung.
Also, TLDR
- Die meisten von uns (und ich normalerweise eingeschlossen) kümmern sich nicht um die Bestellung von CSS-Requisiten. Die meisten von uns kümmern sich auch nicht um CSS.
- CSS-in-JS fördert auch Best Practices nicht ganz.
- Best Practices wie Atomic CSS sind Besties mit Gruppen (von Natur aus), während BEM leider nichts mit der Reihenfolge von Eigenschaften zu tun hat :(
Es ist eigentlich ein bisschen unerwartet, dass eine solche Meinung nicht gut etabliert und definiert ist, und ich muss diesen Artikel schreiben.
Unterhaltsame Tatsache - Gruppen und alphabetische Reihenfolge können Besties sein, um beispielsweise Ihre Modulimporte wie den Import von Eslint-Plugins zu fusseln
Es gibt zuerst Gruppen, und die alphabetische Reihenfolge wird nur innerhalb einer Gruppe verwendet.
Bisher habe ich vernünftige Argumente für die grouping , aber keine einzige (für mich vernünftige) Pro-Alpha-Sorte.
Siehe auch:
WÄHLEN SIE IHRE SEITE und erklären Sie Ihre Position. Ich muss Popcorn teilen.