Entonces, antes que nada, esta no es una batalla común. No se trata de CSS versus CSS-in-JS , no de atomic CSS versus BEM , no de LESS vs SASS . Esta batalla es sobre EL ORDEN.
Esta batalla es entre ORDEN y CAOS. Y entre ORDEN y ... otro ORDEN. En resumen, sobre una mejor manera de ordenar las propiedades CSS. Ni más ni menos.
En resumen, hay 3 formas de hacerlo:
- no lo hagas Escribe cualquier CSS que puedas. Esta es la forma más popular
- Agrupar propiedades por sentido. Solo pon algunas cosas juntas. Esta es una forma bastante popular.
- ordenar todas las propiedades alfabéticamente. La forma más fácil, pero menos popular.
A partir de ahora, olvidémonos de la primera forma. No es el camino.
2012
Hubo una buena encuesta de css-tricks , y aquí están los resultados:
Ya es 2019, ¿qué ha cambiado?
La diferencia entre alpha sort , ABCSS como se conoce, y una grouping es bastante sólida, pero es mejor dejarlo claro
Estado inicial
Comencemos con un CHAOS ideal de este tema más bonito
.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; }
Hermosa? Así es como se ve CSS común después de unos años sin ningún control.
ABCSS
Ordenarlo alfabéticamente
.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%; }
Simplemente ayudó a notar que teníamos dos margin-lefts . Sería más fácil agregar una nueva propiedad la próxima vez, especialmente si toda la clasificación se realiza automáticamente en el nivel de stylelint .
La principal ventaja de la ordenación alfabética: fácil ubicación de la propiedad. Simplemente está escaneando una tabla, como un glosario, y sí, aquí está la propiedad que estoy buscando.
La principal desventaja : la height va antes que el width , la left va antes que la top y hay cierta distancia entre ellos. La ordenación alfabética es mezclar contexto .
He usado alguna herramienta en línea para hacerlo. La gran cantidad de herramientas en línea, complementos para IDEs y herramientas CLI admiten la clasificación alfa de fábrica. - Fácil de usar.
Grupos
Ordenarlo en grupos
.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; }
Esta vez se trata más de la separation of concerns : todas las propiedades se agrupan (agrupan) en cubos por un sentido. El principio de pedido se conoce como "de afuera hacia adentro"
- Propiedades de diseño (posición, flotante, claro, pantalla)
- Propiedades del modelo de caja (ancho, alto, margen, relleno)
- Propiedades visuales (color, fondo, borde, cuadro-sombra)
- Propiedades de tipografía (tamaño de fuente, familia de fuentes, alineación de texto, transformación de texto)
- Propiedades varias (cursor, desbordamiento, índice z)
Y el problema: hay más de un estándar a su alrededor. Para ser más concreto, más de cinco. Y eso es un problema. O no?
Y, una vez más, la clasificación se realiza mediante una herramienta, CSSCOMB esta vez.
La principal ventaja : todas las propiedades están agrupadas por sentido común. Todas las propiedades de flexión: juntas. Todas las posiciones, izquierda, derecha, arriba, abajo, juntas.
- Si necesita agregar algo, agregue en algún lugar y deje que una herramienta haga el trabajo.
- Si necesita encontrar algo, busque un grupo, luego busque dentro de un grupo. Por cierto, esto es MUCHO más rápido que una búsqueda lineal en un caso anterior.
Esto requiere alguna aclaración:
- con orden alfabético: está buscando el comienzo de la línea, señalando el comienzo y el final de "su" primera letra. Entonces vas a pensar en este subbloque y listo. Eso es básicamente O (n). Después de un entrenamiento - O (n / 2), siempre que sepas "dónde" buscar un accesorio.
- con clasificación grupal (ya sabes "dónde" buscar un accesorio) los grupos tienen una posición constante y luego pasan por un pequeño subconjunto, y listo. Eso es básicamente: O (3), no "n".
La principal desventaja : tienes que aprender a separar las conserciones. El 99% de los encuestados dijo que este es un gran problema: escribir CSS agrupado , pero es un trabajo de herramienta, no tuyo. Y sí, hay más de un estándar, pero no es un problema que el pedido se realice con una herramienta.
La encuesta
Entonces, investigué un poco sobre este problema.
- 2012y, css-tricks informó que el 45% de los desarrolladores usa grupos, 14 - clasificación alfa, 39 no usa nada
- encuesta creada hoy (y aún no terminada): 50% para grupos, 25% para alfa, 25% no usa nada
Las mejores razones para usar grupos:
- Los grupos son la forma más natural de poner las cosas juntas: así es como las escribes. Imagínese si tuviera que escribir palabras en una oración en orden alfabético. Arriba, derecha, abajo, izquierda, naturalmente, van juntas, justo después de la posición: absoluto ( twitter ).
- Una buena razón para los grupos podría ser CSS atómico: el átomo / utilidad generalmente está vinculado a un "grupo", es una forma natural de crear marcos funcionales. Por lo tanto, el CSS "normal" podría verse como átomos combinados, es decir, agrupados ( twitter ).
- Los equipos más pequeños pueden preferir agrupar propiedades relacionadas (por ejemplo, posicionamiento y modelo de caja) juntas idiomatic-css .
- Hay ventajas y desventajas en ambos sentidos. Por un lado, el orden alfabético es universal (al menos para los idiomas que usan el alfabeto latino), por lo que no hay ningún argumento sobre la clasificación de una propiedad antes que otra. Sin embargo, me parece extremadamente extraño ver propiedades como la parte inferior y la superior, no una al lado de la otra. ¿Por qué deberían aparecer animaciones antes del tipo de visualización? Hay muchas rarezas con el orden alfabético. Por otro lado, ordenar propiedades por tipo tiene mucho sentido. Se recopilan todas las declaraciones relacionadas con las fuentes, se reúnen arriba y abajo y leer un conjunto de reglas se siente como leer una historia corta. Guía SASS .
- los archivos ordenados por grupo son más pequeños en un 2% después de gzip. Magia Este artículo presenta 5 formas diferentes de pedir accesorios css. estudiar
Algunas razones para no usar
- "Grupos" es genial si significa lo mismo para todos. Por lo general no lo hace. Probablemente podrías automatizar la aplicación de las agrupaciones y luego eres cuadrado. gorjeo
- Los equipos más grandes pueden preferir la simplicidad y la facilidad de mantenimiento que viene con el orden alfabético. de nuevo idiomatic-css
Razones para usar alfabéticamente:
- Solía hacerlo por "grupo" pero es demasiado subjetivo. Además, hay muchos complementos para ordenar alfabéticamente un conjunto de líneas. También el estilo calculado de las herramientas de Chrome Dev es alfa.
- alfabéticamente cualquier otra cosa significa que cualquier persona que venga al proyecto también necesita aprender su patrón.
- mi propia empresa está usando la clasificación alfa (eso fue una sorpresa para mí).
- La guía de Google CSS recomienda ABCSS, sin explicación.
Entonces, TLDR
- a la mayoría de nosotros (y a mí generalmente incluidos) no nos importa un bledo el pedido de accesorios CSS. A la mayoría de nosotros tampoco nos importa una mierda el CSS en sí.
- CSS-in-JS tampoco fomenta las mejores prácticas.
- Las mejores prácticas como CSS atómico son mejores con grupos (por diseño), mientras que BEM, lamentablemente, no tiene nada sobre el orden de las propiedades :(
En realidad, es un poco inesperado que algo tan obstinado no esté bien establecido y definido, y tengo que escribir este artículo.
Dato curioso: los grupos y el orden alfabético podrían ser mejores, por ejemplo, para alinear las importaciones de su módulo, como eslint-plugin-import
Primero hay grupos, y el orden alfabético se usa solo dentro de un grupo.
Hasta ahora escuché argumentos pro grouping bastante razonables, pero ni una sola clase alfa pro (razonable para mí).
Ver también:
SELECCIONA TU LADO y explica tu posición. Tengo algunas palomitas de maíz para compartir.