Comparación de métodos de peinado en 2020

En Smashing, Adebiyi Adedotun Lukman cubre todos estos métodos de peinado. Está en el contexto de Next.js, lo cual es algo importante ya que Next.js tiene algunas formas específicas de trabajar con estas herramientas, es React y, por lo tanto, es una arquitectura basada en componentes. Pero los métodos de estilo de los que hablamos trascienden Next.js y pueden aplicarse ampliamente a muchos sitios web.

Aquí están mis mejores opiniones sobre todo el índice de posibilidades de estilo en estos días.

• CSS normal. Si puedes, hazlo. Ninguna herramienta de construcción es refrescante. Envejecerá bien. Lo único que realmente extraño sin ninguna otra herramienta es anidar consultas de medios dentro de bloques selectores.
• Hablar con descaro a. Sass ha existido y sigue siendo un preprocesador de CSS muy popular. Sass está integrado en muchas otras herramientas, por lo que elegir Sass no siempre significa lo mismo. Una integración simple de Sass podría ser tan sencilla como un sass --watch src/style.scss dist/style.cssscript npm. Luego, una vez que haya aceptado el hecho de que tiene un proceso de compilación, puede comenzar a concatenar archivos, minimizar, eliminar el caché y todas esas cosas que probablemente terminará haciendo de alguna manera de todos los modos.
• Menos y lápiz óptico. Me sorprende que no sean más populares ya que siempre han sido Node y funcionan muy bien con la proliferación de procesos de compilación impulsados ​​por Node. Sin mencionar que son buenos preprocesadores ricos en funciones. No tengo nada en contra de ninguno de los dos, pero Sass es más ubicuo, está más desarrollado activamente y el Sass canónico ahora funciona bien en Node-land.
• PublicarCSS . PostCSS no me obliga porque no me encanta tener que improvisar las funciones de procesamiento que quiero. Eso también tiene el efecto secundario negativo de hacer que el proceso de escribir CSS sea diferente en todos los proyectos. Además, no me gusta la idea de preprocesar las características modernas, algunas de las cuales realmente no se pueden preprocesar (por ejemplo, las propiedades personalizadas no se pueden preprocesar). Pero me encantó Autoprefixer cuando realmente lo necesitábamos, que está basado en PostCSS.
• Módulos CSS. (Construido en PostCSS). Si está trabajando con componentes de cualquier tecnología, los módulos CSS le brindan la posibilidad de aplicar CSS a ese componente, lo cual es una idea increíblemente buena. Me gusta este enfoque dondequiera que pueda conseguirlo. Su módulo CSS también puede ser Sass, para que podamos obtener lo mejor de ambos mundos allí.
• CSS y JS. Seamos realistas, esto significa “CSS-in-React”. Si estás escribiendo Vue, estás escribiendo estilos de la forma en que Vue te ayuda a hacerlo. Lo mismo con Svelte. Lo mismo con Angular. React es el que no tiene opiniones, lo que te permite elegir entre cosas como styled-components, styled-jsx, Emotion… hay muchas de ellas. Tengo proyectos en React y solo uso módulos Sass+CSS y creo que es bueno, pero a mucha gente también le gustan los enfoques CSS-in-JS. Lo entiendo. Obtienes el alcance automáticamente y puedes hacer cosas sofisticadas como incorporar accesorios en las decisiones de estilo. Podría ser fantástico para un sistema de diseño.
• Todo incluido en estilos de utilidad: Grandes ventajas: archivos CSS pequeños, estilos consistentes pero flexibles. Gran desventaja: tienes un trillón de clases todas mezcladas en tu marcado, lo que hace que sea engorroso leerlo y refactorizarlo. No me siento obligado a hacerlo, pero lo entiendo, esas ventajas realmente afectan a algunas personas.

Si deseas escuchar otras versiones interesantes de este espectro, los muchachos de Syntax FM hablaron sobre esto recientemente .