En Smashing, Adebiyi Adedotun Lukman cubre todos estos métodos de estilo. Está en el contexto de Next.js, que 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 diseño de los que se habló trascienden a Next.js y pueden aplicarse ampliamente a muchos sitios web.
Aquí están mis mejores opiniones sobre toda la tabla de contenido de las 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 estado a la vuelta de la esquina y sigue siendo un preprocesador de CSS muy popular. Sass está integrado en toneladas de otras herramientas, por lo que elegir Sass no siempre significa lo mismo. Una simple integración de Sass podría ser tan fácil como una
sass --watch src/style.scss dist/style.cssguión npm. Luego, una vez que haya llegado a un acuerdo con el hecho de que tiene un proceso de compilación, puede comenzar a concatenar archivos, minificar, romper el caché y todas estas cosas que probablemente terminará haciendo de alguna manera de todos modos. - Menos y lápiz. 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. Tampoco tengo nada en contra, pero Sass es más ubicuo, se desarrolla más activamente y Sass canónico ahora funciona bien en Node-land,
- PostCSS. PostCSS no me obliga porque no me gusta tener que improvisar las características de procesamiento que quiero. Eso también tiene el efecto secundario negativo de hacer que el proceso de escribir CSS sea diferente entre proyectos. Además, no me gusta la idea de preprocesar características modernas, algunas de las cuales no pueden preprocesarse (por ejemplo, las propiedades personalizadas no pueden preprocesarse). Pero me encantó Autoprefixer cuando realmente lo necesitábamos, que se basa en PostCSS.
- Módulos CSS. (Construido en PostCSS). Si está trabajando con componentes en cualquier tecnología, los módulos CSS le brindan la capacidad de aplicar CSS a ese componente, lo cual es una idea increíblemente buena. Me gusta este enfoque siempre que puedo conseguirlo. Su módulo CSS también puede ser Sass, por lo que podemos obtener lo mejor de ambos mundos allí.
- CSS en JS. Seamos realistas, esto significa “CSS-in-React”. Si está escribiendo Vue, está escribiendo estilos de la forma en que Vue lo 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 componentes con estilo, jsx con estilo, Emoción… hay muchos de ellos. Tengo proyectos en React y solo uso módulos Sass+CSS y creo que eso es bueno, pero a muchas personas también les gustan los enfoques CSS-in-JS. Lo entiendo. Obtiene el alcance automáticamente y puede hacer cosas sofisticadas como incorporar accesorios en las decisiones de estilo. Podría ser increíble para un sistema de diseño.
- Todo incluido en estilos de utilidad: Grandes ventajas: archivos CSS pequeños, estilos consistentes pero flexibles. Gran desventaja: tiene un millón de clases mezcladas en su marcado, lo que lo hace engorroso de leer y refactorizar. No estoy obligado por eso, pero lo entiendo, esas ventajas realmente afectan a algunas personas.
Si desea escuchar otras tomas calientes en este espectro, los muchachos de Syntax FM hablaron sobre esto recientemente.
(Visited 3 times, 1 visits today)