Aprenda EmotionJS durante su café de la mañana, es así de fácil.

EmotionJS es una biblioteca de CSS en JavaScript con capacidades increíbles. Veamos cómo evolucionó el mundo de CSS a esta solución y luego profundicemos en lo que puede hacer con ella hoy.

Las guerras CSS (resumen)

En los últimos años, hemos visto una transición a diferentes tipos de métodos de estilo, todos basados ​​en CSS. Aquí está la esencia en orden cronológico:

CSS simple y sencillo

Esta es la forma clásica y sencilla de aplicar CSS. Hacemos referencia a un archivo CSS en nuestro index.html y se aplica a nuestros archivos HTML mediante las reglas clásicas de CSS.

Este enfoque tiene problemas cuando se aplica a escala, ya que CSS se basa en una especificidad que debe manejarse con cuidado si queremos evitar colisiones de CSS.

También es difícil de depurar al inspeccionar en el navegador. Es difícil entender qué combinación de propiedades CSS terminó influyendo en el estilo que vemos en una etiqueta HTML.

Preprocesadores CSS

El viejo CSS simple tenía algunas limitaciones, dando origen a algunas extensiones de CSS como Less y Sass. Estas extensiones de idioma nos permiten escribir en un idioma con mayores capacidades. Los ejemplos incluyen anidación de selectores de CSS, funciones y más. Nuestra herramienta de compilación compila estos archivos en archivos CSS simples y se aplican de manera normal.

Módulos CSS

Este enfoque se introdujo una vez que el desarrollo web comenzó a tratar las páginas web como árboles de componentes. Los módulos CSS tienen que ver con diseñar un componente de forma independiente, sin afectar otras partes de la interfaz de usuario y no verse afectados por ellas.

Después de introducir módulos CSS en nuestro proyecto, cada componente hace referencia a un archivo CSS con CSS ordinario o preprocesado. Durante el proceso de compilación, nuestro sistema de compilación (como el paquete web) toma cada clase de CSS, la antepone con el nombre del componente y le agrega un sufijo con un identificador único para que la clase sea única.

Este enfoque es excelente, ya que es muy fácil lograr el aislamiento de CSS. Además, es fácil comprender qué reglas CSS se aplicaron a nuestros elementos HTML y dónde se originaron. He sido un gran defensor de este enfoque, hasta que se lanzó EmotionJS.

CSS en JS

Este enfoque desafía la práctica de aislar CSS en archivos CSS. Nos permite establecer nuestras reglas CSS dentro de nuestro código JavaScript como objetos JS.

Algunos marcos como Reacttienen soporte incorporado para este método. Algunas bibliotecas surgieron de la necesidad de proporcionar una solución más aislada y escalable. Las principales bibliotecas son Styled Components y EmotionJS.

Elaboremos sobre estos.

Componentes de estilo versus EmotionJS!

Los componentes con estilo llegaron primero, y EmotionJS fue ciertamente muy influenciado por ellos.

Los componentes con estilo son componentes de React simples y pequeños. Definen una etiqueta HTML y sus estilos en función de los accesorios del componente.

Esto aísla la semántica HTML y CSS de nuestros componentes React más funcionales. Esto a su vez proporciona una experiencia de desarrollo más legible y fácil de mantener.

Ejemplo de componentes con estilo:

Lo que vemos aquí es un botón HTML con algunos accesorios CSS.

Las propiedades de colory backgroundCSS se determinan en función de un primaryaccesorio que se pasa (o no) al componente.

Observe cómo JSX es muy simple y semántico, y la parte CSS y HTML está aislada en el componente con estilo.

Ahora veamos EmotionJS.

EmotionJStoma el poder de los componentes con estilo y agrega algunas funciones más útiles (y también el logotipo más genial de todos los tiempos).

Demostremos las cosas que pensé que eran más impresionantes con EmotionJS.

Una cosa que odié hasta ahora era mantener consultas de medios CSS.

Las reglas de CSS para cada punto de interrupción residían en diferentes áreas de los archivos CSS. Era difícil ver y manejar las propiedades superpuestas.

En EmotionJS, podemos crear una constante que mantenga los anchos de nuestros puntos de interrupción con la ayuda de la biblioteca Facepaint.

Luego podemos hacer referencia a esta constante, declarando los valores de una propiedad CSS para cada punto de interrupción en un lugar.

Analicemos este ejemplo:

  • Línea 4-9: definimos los anchos de nuestros puntos de interrupción, en un lugar de nuestra aplicación
  • Línea 13-23: definimos un componente Button que es una etiqueta div con algunas propiedades CSS. Sus valores widthy heightse definen como una matriz de valores, uno para cada punto de interrupción. Observe que no necesitamos especificar las pxunidades. Se agregan automáticamente. También observe que la background-colorpropiedad depende del primaryaccesorio proporcionado al componente Botón. Esto es similar al ejemplo de Componentes con estilo.
  • Línea 26-33: en nuestro componente React, hacemos referencia a nuestro botón EmotionJS y lo usamos como una etiqueta JSX

Otras características de EmotionJS

EmotionJS tiene algunas formas más de lograr algunas de estas capacidades:

  • El accesorio CSS: podemos proporcionar a nuestros componentes React un accesorio CSS que es un objeto o cadena de JavaScript que define nuestras propiedades CSS.
  • Las consultas de medios también se pueden orientar con el enfoque de prop CSS

Para concluir: lo bueno, lo malo y lo emocional

Pros:

  • Fácil de integrar y reemplazar otras soluciones CSS.
  • Fácil de identificar y eliminar el código muerto en comparación con otras soluciones.
  • Más fácil de trabajar con consultas de medios, los valores se reúnen.
  • Los componentes de React se vuelven más semánticos a medida que HTML y CSS están aislados.

Contras:

  • Con los módulos CSS, es fácil entender exactamente de dónde viene la regla CSS cuando se inspecciona en el navegador. Esto se debe a que los nombres de clase se generan con prefijos de nombre de componente de React. Con EmotionJS, esto no sucede.
  • Si definimos una propiedad CSS para una consulta de medios, también debemos definirla para el resto, ya que proporcionamos una matriz de valores. En muchos casos, solo queremos abordar una o dos consultas de medios y dejar las demás como valor predeterminado.

El veredicto

EmotionJS es el siguiente paso en la dirección correcta, lidiando con las trampas de CSS. Proporciona un entorno aislado y mantenible que mantiene nuestros componentes principales centrados en la lógica y semántica.

Me tomó literalmente diez minutos aprenderlo e integrarlo y es una mejora importante en esta área.

No olvides aplaudir si te gustó y sígueme en Twitter: //twitter.com/shahar_taite