Cómo evaluar módulos CSS

La modularidad de CSS necesita resolver dos problemas importantes: importar y exportar estilos CSS, y la flexibilidad de importar bajo demanda para reutilizar código, y la capacidad de ocultar ámbitos internos al exportar para evitar la contaminación global. Sass/Less/PostCSS et al han intentado resolver el problema de la débil programabilidad de CSS y han hecho un gran trabajo, pero no han resuelto el problema más importante de la modularidad, que es una serie de problemas relacionados con CSS que se encuentran en React. desarrollo. Combinando mis puntos de vista personales, los resumo de la siguiente manera:

Contaminación global

CSS utiliza el mecanismo de selección global para establecer estilos, lo que tiene la ventaja de que es fácil reescribir estilos. La desventaja es que todos los estilos tienen efecto globalmente y los estilos pueden sobrescribirse con errores, lo que da como resultado resultados muy feos.

El DOM oculto en el estándar de componentes web resuelve completamente este problema, pero su método es algo diferente. En el extremo, el estilo está completamente localizado, lo que resulta en la incapacidad de anular el estilo desde el exterior, perdiendo así flexibilidad.

Confusión de nombres

Debido al problema de la contaminación global, para evitar conflictos de estilo cuando varias personas colaboran en el desarrollo, los selectores se vuelven cada vez más complejos y es fácil formar diferentes Estilos de denominación difíciles de unificar. A medida que haya más y más estilos, la denominación se volverá más confusa.

Gestión de dependencias incompleta

Los componentes deben ser independientes entre sí. Cuando introduces un componente, solo debes introducir los estilos CSS que necesita. Sin embargo, el enfoque actual es introducir CSS al mismo tiempo que JS. Saas/Less dificulta la compilación de CSS por separado para cada componente, y la introducción de CSS para todos los módulos también es un desperdicio. La modularidad de JS es lo suficientemente madura. Sería mejor si JS pudiera administrar las dependencias de CSS. El "css-loader" de Webpack proporciona esta función.

Las variables compartidas no se pueden compartir

Los componentes complejos utilizan JS y CSS para manejar estilos, lo que puede hacer que algunas variables aparezcan tanto en JS como en CSS y sean redundantes, y Sass/PostCSS. /CSS no ofrece la posibilidad de compartir variables entre JS y CSS.

Compresión de código incompleta

Debido a la incertidumbre de las redes móviles, la compresión CSS se ha vuelto muy anormal. Muchas herramientas de compresión convertirán "16px" en "1pc" para ahorrar un byte. Pero no hacen mucho con nombres de clases muy largos, por lo que no utilizan todo su poder.

El problema anterior no se puede resolver solo con CSS, pero se puede resolver bien si CSS se administra a través de JS. Por lo tanto, Vjuex proporcionó una solución que usa CSS completamente en JS, pero esto equivale a abandonar por completo. CSS y el uso de la sintaxis de objetos para escribir CSS en JS pueden resultar sorprendentes para quienes acaban de verlo. Hasta que aparecieron los módulos CSS.