"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Estilos en React

Crear estilos en un componente de React es sencillo, sin embargo puede resultar confuso tanto por las distintas maneras de diseñar nuestros componentes, como porque para incluir estilos en React existen distintas alternativas.

Si bien es cierto que todas las maneras que vamos a explicar pueden ser válidas, que sea válido no implica que sea eficiente o limpio a nivel de código.

Archivos CSS

Podemos añadir estilos en React mediante archivos CSS independientes

Al igual que una web estándar lo típico es tener los estilos en un fichero .css y luego incorporarlo en el head mediante etiquetado html, en React podemos hacer lo mismo y después importarlo en nuestro componente.

Este paradigma es una herencia de los framewoks que proponen tener una separación entre ficheros .css y .js, si bien es cierto que por costumbre nos podamos sentir cómodos con esta manera de trabajar, presenta problemas como:

  • Multiplicamos el número de ficheros de forma innecesaria.
  • Al importar de esta manera un fichero el ambito de actuación no esta definido, las clases se cargan en la página y aplican a cualquier elemento, de manera que si en distintos componentes definimos los mismo nombres de clase estos van a colisionar.

Si te decides por usar esta manera simplemente crea un fichero .css como este (lo voy a llamar estilos.css).

Y en el componente de React lo usas de esta manera.

Como aclaración no olvidemos que un componente de React es código Javascript y class es una palabra reservada, así que para asignar las clases a una etiqueta html debemos usar como atributo className.
Si quieres saber cuales son las palabras reservadas puedes visitar esta entrada.

Usar estilos en linea

Podemos añadir en linea nuestros estilos en React, no es ninguna novedad pues es lo mismo que hacerlo en HTML, y al igual que en ese caso se trata de una mala práctica pero funciona.

Añadir el atributo style y escribir dentro los estilos nos permite tenerlos en el mismo fichero, y también es cierto que de esta manera los estilos son propios del componente, pero tiene unas carencias bastante grandes (las mismas que en HTML), por mencionar algunas…

  • No puedes reutilizar nada
  • No puedes declarar fuentes
  • No puedes declarar media-queries
  • No puedes usar selectores CSS
  • Tienes que usar objetos y sintaxis camelCase

A mi entender pierdes tanta potencia que para la mayoría de desarrollos no sirve, este es el mismo ejemplo de antes usando estilos en linea.

Si no quiere ensuciar tanto el template también puedes guardar el valor en constantes (estoy asumiendo que creas los componentes con ES6)

Hojas de estilo JS

Puede sonar raro esto de crear una hoja de estilos en javascript pero es perfectamente posible y además en proyectos como React Native es la manera estandar de añadir los estilos.

Si estamos programando una web necesitaremos apoyarnos en librerías externas para que nos den esta funcionalidad, por ejemplo podemos usar aphrodite o radium.

La ventaja que presenta el hacer uso de este método es que aquí los estilos definidos si que son propios del componente unicamente. Además tenemos los estilos en el mismo fichero que a mi entender es como debiera ser.

Sin embargo no todo iban a ser ventajas, por contra:

  • Nos atamos a una librería y añadimos una dependencia extra.
  • Hay que aprender a usarla así que tendremos una ligera curva de aprendizaje.
  • No es CSS estandar sino que, al menos en el caso de las librerías mencionadas, se vale de objetos y sintaxis camelCase.

Módulos CSS

Esta es una manera muy similar a la primera de usar Archivos CSS, lo que cambia ahora es que ese fichero se importa dentro de una variable.

Pero hay mucho más, cuando importamos la hoja de estilos como un módulo React puede asignar a esos estilos un espacio de nombre propios para que solo apliquen a ese componente evitando colisiones.

Usando los módulos abrimos la puerta al preprocesamiento del código de manera que podremos transpilarlo usando sass, less o stylus. Y esto si que es una gran ventaja.

Como punto negativo seguimos teniendo los ficheros separados de forma innecesaria.

Styled components

Es la manera más reciente y un cambio completo en la filosofía de creación de estilos, puede resultar dificil la adaptación pues propone una combinación de etiquetas HTML y CSS mediante un etiquetado propio.

Aunque puede no servir para todos los casos parece que la comunidad de React va en esta dirección.

Si quieres sabe más sobre esto puedes echar un vistazo a librerías como styled-components o glamorous en las cuales se implementa esto.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)