¿Por qué utilizar SCSS en lugar de Styled Components?

Tras comparar soluciones populares como CSS plano, Emotion, SCSS y Componentes estilizadosFinalmente seleccioné el último. Todo parecía ir bien. Tiene una biblioteca muy popular hoy en día, lo que significa que
ya hay una gran comunidad, así que si me encuentro con algún problema, probablemente encontraré una solución en algún lugar de Stack Overflow o GitHub. Además de eso, Componentes estilizados tienen algunas características de optimización, lo que significa que sólo se renderizan cuando es necesario. El sitio proyecto se esperaba que se construyera usando React y Typescript. Esta biblioteca tiene un gran soporte para ambas tecnologías. Suena genial, ¿verdad?

Entonces empecé a programar. Después de un mes, cuando la aplicación ha crecido, el frontend equipo y yo centrado en ofrecer prestaciones, descubrimos que el increíble Componentes estilizados biblioteca tuvo su propio gol y te diré por qué.

En primer lugar, la nomenclatura. Para diferenciar Componentes estilizados de componentes React, tuve que utilizar el Estilizado prefijo que disminuyó código legibilidad. Luego (lo que puede resultar extraño), soporte para Typescript. Componentes estilizadoscomo ya sabrás, se basan en el enfoque CSS-in-JS. Esto significa que usted puede pasar cualquier prop a ellos y cambiar el estilo de, es decir, la entrada basada en esta prop y yo personalmente creo que esta característica es impresionante. En Typescript, también debes implementar el tipo de esta prop hace que el código sea más largo cualquier Componente estilizado. "Pero si tardaría 5 segundos más, ¿cuál es el problema?", dirás. Tienes razón, aunque cuando la aplicación se escala rápidamente y el número de componentes es
cada vez mayor, estos 5 segundos pueden multiplicarse fácilmente por cientos de veces. Otro problema es la colocación del Componentes estilizados.

Algunos Desarrolladores JS los colocan en el mismo archivo con el componente al que pertenecen, y otros crean archivos separados para ellos. Ambos enfoques son buenos por muchas razones. Depende sobre todo de la complejidad del componente. Seguir una de estas técnicas puede mantener la cohesión, pero fusionarlas da exactamente lo contrario. Renunciamos al enfoque CSS-in-JS y migramos a SCSS. No fue fácil ni rápido, pero con un poco de ayuda lo conseguimos. Empezamos a aplicar estilos a las etiquetas html según la metodología BEM y, por supuesto, pusimos los estilos en archivos separados, uno por componente. Dije que pasar JS props a Componentes estilizados es una característica impresionante, pero en SCSS es imposible. Creo que también todos estamos de acuerdo en que la sintaxis que React quiere para codificar clases condicionales es horrible.

Bueno, hay una solución bastante interesante. Si conectas la metodología BEM con el clsx obtendrás algo como esto (muchas gracias a mi amigo Przemek Adamczyk por enseñarme esta biblioteca)

Parece mucho más limpio, ¿no crees?

Lo mejor es que sólo tiene que escribir la variable de condición en el nivel de componente y
no a nivel de estilo. Realmente ahorra tiempo. Por desgracia, esta solución tiene sus contras.
SCSS es fácil y amigable pero ten cuidado cuando lo uses con Next.js. Este framework no
permiten importar archivos de estilo directamente en el archivo del componente (sólo Módulos CSS).

Si prefiere un archivo por componente, tiene que crear index.scss que contiene todos sus SCSS archivos y
importarlo al Aplicación archivo. El único problema es que hay que importar manualmente cada SCSS que ha creado. En React, sin embargo, este problema no existe y puedes importar SCSS archivos donde quieras. No me malinterpretes. Componentes estilizados son realmente buenas. Como he dicho antes, pasar variables JS así como el tema global son características increíbles. Cuando construyes una aplicación grande donde la optimización es crucial, esta librería probablemente satisfará tus necesidades. En nuestro caso, sin embargo, la migración a SCSS le ha tocado el gordo.

Resumen

En conclusión, aunque hay argumentos válidos para ambos SCSS y componentes con estilo en desarrollo web La decisión final depende de varios factores. SCSS ofrece una sintaxis más familiar para desarrolladores experimentados en CSS tradicional y ofrece una integración perfecta con los bases de código y bibliotecas de componentes .

Por otro lado, Componentes estilizados ofrecen una mayor experiencia como desarrollador con su capacidad para encapsular estilos dentro de los componentes y simplificar el proceso de estilización. También fomenta la modularidad y la reutilización del código, lo que permite a los ingenieros de front-end gestionar de forma eficiente los directorio de componentes y crear una interfaz de usuario coherente en todo el aplicación web . Teniendo en cuenta la importancia de datos del usuario seguridad y rendimiento, es crucial evaluar el impacto de ambos enfoques sobre el tamaño final del paquete y los tiempos de carga. En última instancia, la elección entre SCSS y componentes con estilo debe basarse en las necesidades específicas del proyecto, el conjunto de competencias del equipo de desarrollo y los objetivos generales de la aplicación web . Es aconsejable que los desarrolladores evalúen todos los factores, se mantengan actualizados a través de entradas de blog y los debates del sector, y tomar una decisión informada que se ajuste a los requisitos de su proyecto y mejore el rendimiento general de la empresa. proceso de desarrollo front-end .