¿Cómo encaja el CSS en React?

Hay muchas maneras diferentes en las que puedes escribir CSS para tus aplicaciones de React, yo diría que realmente tienes más opciones para estilizar las aplicaciones de React que las aplicaciones web tradicionales.

Vamos a definir algunas de estas opciones:

  • CSS estándar
  • Estilos en línea
  • Módulos CSS
  • CSS-in-JS

Ahora echemos un vistazo más de cerca a cada uno de ellos.

CSS estándar

Esta es la forma tradicional y más común de escribir CSS. Usted crea un archivo style.css , agrega todos sus estilos dentro de él, luego importa la hoja de estilos y hace referencia a los estilos dentro de su JSX mediante atributos className o id.

Tenga en cuenta que no tiene que limitar sus estilos dentro de una sola hoja de estilo, también puede dividirlos en múltiples archivos y colocarlos al lado de los componentes a los que se supone que deben dirigirse.

También tenga en cuenta que puede seguir utilizando sus bibliotecas y marcos de trabajo CSS diarios, como SASS , LESS , Bootstrap , Semantic UI , etc, también, React no te limita de ninguna manera.

Estilos en línea

Los estilos en línea se refieren a la escritura de CSS directamente dentro del marcado HTML mediante el atributo style. En Reacción, usando JSX, esto se ve así:

=[ TheSubFactory]=- *!* Un Nuevo Mundo En Subtítulos *!* Un Nuevo Mundo En Subtítulos *!*.:

Los estilos en línea son probablemente el enfoque más limitado en términos de diseño de aplicaciones completas ya que no pueden hacer uso de todas las características CSS como pseudo selectores , animaciones y consultas de medios de comunicación .

En la práctica se utilizan sobre todo para modificaciones básicas de estilo como el cambio de color basado en una condición, pero también he oído hablar de personas e incluso empresas que utilizan esto como su único mecanismo de estilo.

(Tenga en cuenta que, posiblemente, los estilos en línea también pueden ser considerados como parte de CSS-in-JS, porque técnicamente se escriben dentro de los archivos JS con React. La razón por la que decidí ponerlos en su propia categoría fue porque las librerías CSS-in-JS son típicamente más complejas que sólo escribir estilos dentro de un atributo de estilo – en su lugar introducen algún tipo de abstracción de mayor nivel como verás en la sección CSS-in-JS.)

Módulos CSS

Con los módulos CSS se crea un archivo CSS para cada tipo de componente que se quiera estilizar de la misma manera que se hace con el "Standard CSS"; , sin embargo la diferencia aquí es que con los módulos CSS los estilos son escudriñados localmente lo que significa que a diferencia de CSS estándar no se filtran a otros componentes .

El hecho de que los estilos tengan un alcance local también significa que puede olvidarse de implementar sus propias estrategias de alcance local o de seguir metodologías como BEM que requieren que cree y escriba manualmente nombres largos de clase o ID.

Cómo usar dentro de React:

Utilice css-loader dentro de su webpack.config con la propiedad modules set to true, o descargue una biblioteca completa como css-modules , una vez que haya configurado use lo siguiente:

  • crear un archivo CSS para cualquier componente que desee cambiar de estilo
  • escriba su CSS
  • importar este archivo CSS dentro de los componentes de destino
  • hacer referencia a estos estilos dentro de sus componentes mediante sus atributos className e id

¿Cómo se implementan los módulos CSS entre bastidores?

Los módulos CSS funcionan tomando sus archivos CSS y ejecutándolos a través de un compilador de módulos CSS que hace dos cosas:

  • modifica los nombres de clase y/o id dentro de sus archivos CSS para hacerlos únicos
  • produce un archivo JS que contiene el mapeo entre los nombres generados recientemente y los nombres antiguos

De ahí por qué puede usar importaciones con nombre con módulos CSS – en realidad no está importando su CSS, sino el JS que fue producido por el compilador del módulo CSS.

CSS-in-JS

Como el nombre sugiere con CSS-in-JS usted escribe su CSS dentro de archivos JavaScript en lugar de archivos CSS, la forma de escribirlos y aplicarlos, sin embargo, depende en gran medida de la biblioteca CSS-in-JS específica que usted utilice.

Detrás de las escenas, CSS-in-JS se implementa normalmente de una de las siguientes tres formas (o una combinación de) :

  • a través de estilos en línea
  • mediante a a a la sección de cabecera de documentos. Además, dado que proporciona un alcance de estilo local, se encarga de generar y aplicar nombres de clase únicos.

    Para visualizar mejor esto, ejecutemos el fragmento de código anterior y veamos qué produce después de ser añadido al DOM:

    ….
    >

    >/* sc-component-id: sc-bdVaJa */.sc-bdVaJa{}.brPdfu{ancho máximo: 600px;margen: 0 auto;}>

    >>.
    

    Hola Mundo>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ...

    Como pueden ver, se parece a como esperábamos que se viera. La única sorpresa es la declaración de estilo extra vacío .sc-bdVaJa {}que se basa en el comentario justo encima de él/* sc-component-id: sc-bdVaJa */parece sugerir que los componentes de estilo mantienen un registro de a qué componente pertenecen los estilos – presumiblemente para algún tipo de optimización del rendimiento interno o algo parecido.

    Si te gusta lo que ves, es posible que también quieras obtener otra biblioteca CSS-in-JS muy similar llamada Emotion , muy similar a styled-components , pero que te da la opción de extraer todos tus estilos en un archivo CSS, en el momento de la compilación, que luego se enlaza al documento mediante el elemento. ¿Por qué es útil? Porque la hoja de estilo generada puede ser almacenada en caché por el navegador.

    Para una lista completa de las soluciones CSS-in-JS más populares vea este repositorio github.

    Línea de meta

    Felicidades por llegar al final :), gracias por leer y espero que hayas aprendido algo útil. Twitter: linasmnew.

    JavascriptProgramaciónDesarrollo WebReactCodingContinuar la discusión