Métodos de estilización de componentes React
Existen muchas formas diferentes de estilizar componentes React. Aquí consideraremos algunos de los básicos.
El enfoque estándar que podemos aplicar, como en la estilización normal de páginas web, es el uso de CSS global. Aquí creamos un archivo CSS externo común con estilos. Con este enfoque, todos los nombres de clase se encuentran en el ámbito global, lo que puede llevar a conflictos entre ellos. También se pueden crear muchos archivos CSS pequeños. Este enfoque es poco eficiente para crear aplicaciones grandes y escalables.
El siguiente enfoque es la estilización en línea.
Al usarlo, podemos agregar estilos CSS en línea,
similar a como se hace en HTML normal. En
este caso, trabajaremos con el atributo
style, pasándole las propiedades
CSS necesarias. La aplicación de dicha estilización
se considera una mala práctica y se recomienda
solo para agregar estilos calculados dinámicamente
durante el renderizado. Esta
forma es buena para la creación rápida de prototipos
de la interfaz de un componente individual.
El siguiente par de métodos que consideraremos son modernos, están ganando popularidad y son formas eficientes de estilización. Estos son precisamente los métodos que se recomienda aplicar para la estilización de aplicaciones React grandes y escalables.
El primero de ellos es la aplicación de la biblioteca Styled Components, que utiliza cadenas de plantillas para la estilización. Este método nos permite escribir CSS normal en el código JS, utilizando toda su funcionalidad.
El segundo método es la aplicación de módulos CSS. En este caso, un módulo CSS es un archivo CSS en el que, por defecto, todos los nombres de clase y animaciones se encuentran en el ámbito local, es decir, solo están disponibles dentro del componente que lo utiliza.
En estos dos últimos métodos, no tenemos que temer conflictos entre nombres de clase, ya que son únicos: se utiliza el concepto de ámbito local. Además, cuando se usan, se elimina la necesidad de la metodología BEM.
En las siguientes lecciones, consideraremos con más detalle todos los métodos mencionados aquí.
