Cut the SASS: Cómo usar estilos de JavaScript en línea para todo.

Hoy, el desarrollo web front-end se trata de crear aplicaciones, no solo páginas web. Y aunque CSS y SASS fueron excelentes para diseñar páginas, no son adecuadas para aplicaciones de diseño. Esto es especialmente cierto si está construyendo con una estrategia basada en componentes.

Una estrategia basada en componentes es la idea de dividir su aplicación en pequeños bloques de construcción reutilizables llamados componentes. El uso de componentes para crear su aplicación puede aportar reutilización, claridad y eficiencia a su interfaz.

Para obtener todos los beneficios de un enfoque basado en componentes, queremos componentes que encapsulen completamente la función, el marcado y los estilos.

En esta publicación exploraremos cómo escribir estilos usando JavaScript en línea es una excelente manera de apoyar el desarrollo basado en componentes. Al final, terminaremos con componentes front-end que son un solo archivo, fácilmente compartibles y totalmente independientes.

Escribir sus estilos en JS es un gran cambio, por lo que quiero tomarme un tiempo para explicar por qué queremos hacer esto. Creo en elegir la herramienta adecuada para el trabajo correcto. SASS fue sin duda la herramienta adecuada para su tiempo, proporcionando algunos grandes beneficios como:

  • Anidamiento
  • Variables
  • Mixins

Anidar fue un gran beneficio porque permitió que tus estilos reflejaran tu marcado. Si tuvieras:

Podrías hacerlo:

Este beneficio ya no es tan útil. Todavía estamos muy interesados ​​en que nuestros estilos reflejen nuestro marcado, ¡pero nuestro marcado ha cambiado!

Hoy, utilizando un enfoque basado en componentes, preferimos separarlos en dos componentes distintos llamados `UserList` y` User`. El resultado son dos archivos, donde `UserList` contendría una serie repetitiva de` User`.

Dado que estamos dividiendo nuestra aplicación en componentes, debemos escribir nuestros estilos usando la misma estrategia. Eso significa que debemos intentar ubicar nuestros estilos junto con el marcado de nuestros componentes para que se encapsulen juntos.

Una forma de lograr esto es usar estilos en línea, como los días anteriores a las hojas de estilo en cascada.

Este método clásico está muy bien alineado con un enfoque basado en componentes. No lo usaremos porque es muy limitante, pero demuestra los principios que estamos buscando en una solución de diseño moderna.

Variables y Mixins

Hemos hablado sobre la anidación de SASS, ¿qué pasa con los otros grandes beneficios: variables y mixins?

Bueno, da la casualidad de que existe otra solución bastante popular para ellos: ¡JavaScript!

¿No sería genial si pudiéramos aprovechar las características naturales de JavaScript para 'var' y 'function' para darnos lo que necesitamos en una solución de diseño? Si usamos JavaScript para escribir nuestros estilos, obtenemos la flexibilidad, el poder y la familiaridad que amamos de JS. ¡Más! ¡Todo nuestro componente puede estar compuesto en un solo idioma! ¡E incluso un solo archivo!

Nuestras metas

Esto es lo que queremos hacer:

  • Componga nuestros estilos directamente junto con el marcado
  • Variables `import` y` export` como colores o puntos de interrupción
  • Escriba estilos "dinámicos" según el estado (menú abierto / cerrado, etc.)

Aquí hay algunos requisitos más:

  • Necesita cubrir pseudoestados como `: hover,: before,: after`
  • Debe admitir directamente consultas de medios como `@media (max-width: 600px)`
  • Permitir funciones / ternaries (ver dinámico, arriba)

Nota al margen: explicando la diferencia entre "estilos JS" y "CSS en JS"

Hay dos enfoques distintos:

  • Puedes incluir CSS en tu JS
  • Puedes escribir tu CSS usando JS

Prefiero el segundo método y es lo que cubriremos aquí.

Para el primer enfoque, CSS Modules es una solución popular en la categoría "escriba CSS en su JS". Alcanza, o espacios de nombres, el CSS normal que escribe en el

`de un componente. El espaciado de nombres es algo que puede hacer manualmente con clases o ID, y no es razón suficiente para usar algo como esto solo. Para soporte variable o mixins, debe usar un "potenciador" CSS como PostCSS o SASS con módulos CSS.

Una vez más, queremos poder aprovechar JavaScript para las características del lenguaje, incluidas las variables, ternaries o funciones. Si nuestra solución nos obliga a escribir algún tipo de CSS "mejorado" en lugar de JS, no funcionará para nuestras necesidades.

Hay muchas soluciones css-in-js disponibles para ambos enfoques. ¡Compruébalo! Por ahora, implementaremos lo que encontré funciona mejor para resolver nuestros objetivos y requisitos.

¡Empecemos!

Estaremos usando:

  • ES6 transformado por Babel
  • Reaccionar para representar nuestro marcado
  • Afrodita para crear CSS desde JS que escribimos.

Primero, crearemos un componente simple, llamado UserMenu. Tendrá un pequeño avatar de usuario y un menú que se desplegará al hacer clic en él.

Puede usarlo en la página de su aplicación como:

El marcado no es importante. Esto es solo React básico o incluso AngularJS con una pequeña sintaxis de componentes funcionales ES6 / sin estado.

¡Empecemos a peinar! Comience por incluir Afrodita.

Aquí, estamos importando las funciones específicas que necesitamos de Afrodita como lo indican los documentos.

Nota sobre las importaciones: estamos importando referencias específicas con la 'import {bar} de la sintaxis' foo '. Lea más sobre la documentación de importación MDN

Ahora hemos escrito un `const styles` y usamos` StyleSheet.create () `con nuestro objeto de estilos dentro. Esto es de la documentación de Afrodita. Afrodita inyecta una etiqueta `