Donc, tout d'abord - ce n'est pas une bataille commune. Il ne s'agit pas de CSS contre CSS-in-JS , pas atomic CSS contre BEM , pas de LESS vs SASS . Cette bataille porte sur L'ORDRE.
Cette bataille est entre ORDRE et CHAOS. Et entre ORDRE et, ... un autre ORDRE. En bref - sur une meilleure façon de trier les propriétés CSS. Ni plus ni moins.
En bref - il y a 3 façons de le faire:
- ne le fais pas. Écrivez n'importe quel CSS comme vous le pouvez. C'est le moyen le plus populaire
- regrouper les propriétés par sens. Mettez juste quelques trucs ensemble. C'est un moyen assez populaire.
- triez toutes les propriétés par ordre alphabétique. Le moyen le plus simple mais le moins populaire.
A partir de maintenant, oublions la première façon. Ce n'est pas comme ça.
2012
Il y a eu un bon sondage de css-tricks , et voici les résultats:
Nous sommes déjà en 2019, qu'est-ce qui a changé?
La différence entre le alpha sort , ABCSS comme on l'appelle, et un grouping est assez solide, mais il vaut mieux le préciser
État initial
Commençons par un CHAOS idéal de ce plus joli numéro
.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; }
Magnifique? Voilà à quoi ressemble le CSS commun après quelques années sans aucun contrôle.
ABCSS
Trier par ordre alphabétique
.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%; }
Cela a juste aidé à remarquer que nous avions deux margin-lefts . Il serait plus facile d'ajouter une nouvelle propriété la prochaine fois, surtout si tout le tri est effectué automatiquement au niveau stylelint .
Le principal avantage du tri alphabétique - localisation facile de la propriété. Vous êtes juste en train de numériser un tableau, comme un glossaire, et oui, voici la propriété que je recherche.
Le principal inconvénient - la height va avant la width , la left va avant le top et il y a une certaine distance entre eux. Le tri alphabétique mélange le contexte .
J'ai utilisé un outil en ligne pour le faire. La grande quantité d'outils en ligne, de plugins pour les IDE et les outils CLI prennent en charge le tri alpha dès la sortie de la boîte. - facile à utiliser.
Les groupes
Triez-le en groupes
.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; }
Cette fois, il s'agit davantage de separation of concerns - toutes les propriétés sont regroupées (groupées) en seaux par un sens. Le principe de commande est appelé "Outside-in"
- Propriétés de mise en page (position, float, clear, display)
- Propriétés du modèle de boîte (largeur, hauteur, marge, rembourrage)
- Propriétés visuelles (couleur, arrière-plan, bordure, boîte-ombre)
- Propriétés de typographie (taille de police, famille de polices, alignement de texte, transformation de texte)
- Propriétés diverses (curseur, débordement, z-index)
Et le problème - il y a plus d'une norme autour d'elle. Pour être plus concret - plus de cinq. Et c'est un problème. Ou pas?
Et, encore une fois - le tri est effectué par un outil, CSSCOMB cette fois.
Le principal avantage - toutes les propriétés sont regroupées par bon sens. Toutes les propriétés flexibles - ensemble. Toutes les positions, gauche, droite, haut, bas - ensemble.
- Si vous devez ajouter quelque chose - ajoutez quelque part et laissez un outil faire le travail.
- Si vous avez besoin de trouver quelque chose - cherchez un groupe, puis regardez à l'intérieur d'un groupe. Soit dit en passant - c'est bien plus rapide qu'une recherche linéaire dans un cas précédent.
Cela nécessite quelques éclaircissements:
- avec tri alpha - vous recherchez un début de ligne, pointant le début et la fin de "votre" première lettre. Ensuite, vous allez penser à ce sous-bloc et c'est fait. C'est essentiellement O (n). Après un peu de formation - O (n / 2), tant que vous saurez «où» chercher un accessoire.
- avec le tri de groupe - vous savez "où" chercher un accessoire - les groupes ont une position constante, puis passent par un petit sous-ensemble, et c'est fait. C'est essentiellement - O (3), pas "n".
Le principal inconvénient - vous devez apprendre à séparer les conserns. 99% des répondants ont dit que c'est un gros problème - pour écrire des CSS groupés , mais c'est un travail d'outil, pas le vôtre. Et, oui, il y a plus d'une norme, mais ce n'est pas un problème alors la commande se fait par un outil.
Le sondage
J'ai donc fait quelques recherches sur ce problème.
- 2012y, css-tricks a rapporté que 45% des développeurs utilisent des groupes, 14 - tri alpha, 39 n'utilisent rien
- sondage créé aujourd'hui (et pas encore terminé) - 50% pour les groupes, 25% pour l'alpha, 25% n'utilisent rien
Meilleures raisons d'utiliser des groupes:
- Les groupes sont la façon la plus naturelle de rassembler les choses: c'est ainsi que vous les écrivez. Imaginez si vous deviez écrire des mots dans une phrase dans l'ordre alphabétique. Le haut, la droite, le bas et la gauche appartiennent naturellement ensemble, juste après la position: absolue ( twitter ).
- Une bonne raison pour les groupes pourrait être atomique CSS - atom / utility sont généralement liés à un seul "groupe", c'est un moyen naturel pour les cadres fonctionnels. Le CSS «normal» pourrait donc ressembler à des atomes combinés - c'est-à-dire groupés ( twitter ).
- Les équipes plus petites peuvent préférer regrouper les propriétés liées (par exemple le positionnement et le modèle de boîte) ensemble idiomatic-css .
- Il y a des avantages et des inconvénients dans les deux sens. D'une part, l'ordre alphabétique est universel (au moins pour les langues utilisant l'alphabet latin) donc il n'y a aucun argument sur le tri d'une propriété avant une autre. Cependant, il me semble extrêmement bizarre de voir des propriétés telles que le bas et le haut non pas côte à côte. Pourquoi les animations devraient-elles apparaître avant le type d'affichage? Il y a beaucoup de bizarreries avec l'ordre alphabétique. D'un autre côté, le classement des propriétés par type est parfaitement logique. Toutes les déclarations liées aux polices sont rassemblées, le haut et le bas sont réunis et la lecture d'un ensemble de règles ressemble à la lecture d'une nouvelle. Guide SASS .
- les fichiers triés par groupe sont plus petits de 2% après gzip. La magie Cet article présente 5 façons différentes de commander des accessoires CSS. étude
Quelques raisons de ne pas utiliser
- "Groupes" est génial s'il signifie la même chose pour tout le monde. Ce n'est généralement pas le cas. Vous pouvez probablement automatiser l'application des regroupements, puis vous êtes carré. twitter
- Les grandes équipes peuvent préférer la simplicité et la facilité de maintenance qui vient avec l'ordre alphabétique. encore idiomatique-css
Raisons d'utiliser l'alphabet:
- J'avais l'habitude de le faire par "groupe" mais c'est trop subjectif. De plus, il existe de nombreux addons pour trier alpha un ensemble de lignes. Le style calculé des outils de développement Chrome est également alpha.
- par ordre alphabétique. toute autre chose signifie que toute personne venant sur le projet doit également apprendre votre modèle.
- ma propre entreprise utilise le tri alpha (ce fut une surprise pour moi).
- le guide google css recommande ABCSS, sans explication.
Donc, TLDR
- la plupart d'entre nous (et moi généralement inclus) ne se soucient pas de la commande des accessoires CSS. La plupart d'entre nous ne se soucient pas non plus du CSS lui-même.
- CSS-in-JS n'encourage pas non plus les meilleures pratiques.
- Les meilleures pratiques comme le CSS atomique sont des besties avec les groupes (par conception), tandis que BEM, malheureusement, n'a rien à voir avec l'ordre des propriétés :(
C'est en fait un peu inattendu, cette chose d'opinion n'est pas bien établie et définie, et je dois écrire cet article.
Fait amusant - les groupes et l'ordre alphabétique pourraient être des besties, par exemple pour lint les importations de votre module, comme eslint-plugin-import
Il y a d'abord les groupes et l'ordre alphabétique n'est utilisé que dans un seul groupe.
Jusqu'à présent, j'ai entendu des arguments tout à fait raisonnables pour le grouping pro, mais pas un seul tri (raisonnable pour moi) pro alpha.
Voir aussi:
Choisissez votre côté et expliquez votre position. J'ai du pop-corn à partager.