Un caso para los módulos CSS y cómo implementarlos en su aplicación React
Foto de Nathan da Silva en Unsplash
Si es relativamente nuevo en CSS, es posible que se haya encontrado o no con el importante problema que ocurre cuando el estilo de una aplicación se expande, ya que las reglas de CSS siguen alcance global, dos o más clases con el mismo nombre colisionarán. Manejar múltiples hojas de estilo y realizar un seguimiento de las convenciones de nomenclatura en archivos CSS puede resultar engorroso y, si no es lo suficientemente cuidadoso, seguramente encontrará algunos conflictos debido a nombres de clases idénticos.
Los módulos CSS pueden resolver estos errores que probablemente aparezcan, especialmente a medida que su aplicación crece. En última instancia, nos permiten usar el mismo nombre de clase en múltiples archivos sin errores de selector y reglas al determinar el alcance de los nombres de clase. en la zona por defecto.
Un módulo CSS es simplemente un archivo .css, donde las clases actúan de manera similar a las variables locales en Javascript. Es una herramienta que hace que cada clase sea única al incluir un hash en su nombre.
Creando un módulo CSS
Si está utilizando create-react-app, crear un módulo CSS para un componente es relativamente fácil. Siga la convención de nomenclatura típica para un archivo css, pero inserte el módulo antes de .css, así: [name].módulo.css
Para ver un ejemplo, aquí está mi archivo Task.module.css dentro de una aplicación de tareas sencilla:
Si tengo otra clase de cuadro en un componente diferente que tiene un color diferente, esas reglas no colisionan ya que se aplican los módulos alcance local.
Para importar un módulo CSS al componente correspondiente, importe la hoja de estilos del módulo CSS como estilos o [name]Estilos:
En JSX, use la clase CSS definida como un accesorio className así:
Desde aquí, puede agregar tantos otros módulos CSS como desee, solo recuerde importar cada uno con un nombre diferente.
Con los módulos CSS, puede crear archivos CSS portátiles y reutilizables y ya no tendrá que preocuparse por las colisiones de nombres de selectores o las reglas que afectan los estilos de otros componentes.
A menudo, cuando se enfrentan a la decisión de diseñar las aplicaciones React, los desarrolladores se debaten entre usar Módulos CSS o un CSS en JS (herramienta para abstraer el CSS al nivel de componente) biblioteca como styled-components, Emotion o styled-jsx. A medida que las bibliotecas CSS-in-JS se utilizan cada vez más y son cada vez más comunes para describir estilos de forma declarativa, he notado que muchos todavía creen que los módulos CSS son el camino a seguir, especialmente por sus cualidades modulares y reutilizables que hacen que la experiencia de diseño sea mucho más agradable. sin costura.