Me acompaña Dustin Schau en este video y me llevará en un recorrido por el mundo de lo que se conoce como CSS-in-JS. Es decir, hacer su estilo completamente en JavaScript, en lugar de en .cssarchivos que se le ocurren por su cuenta.
Dustin es una guía perfecta para esto, ya que creó una gran herramienta de exploración llamada CSS en JS Playground y también tiene un curso completamente nuevo sobre el tema.
Si tiene curiosidad por saber por qué alguien estaría interesado en seguir la ruta CSS-in-JS, aquí hay algunas razones que discutimos en el video:
- Eliminación de código muerto. Los únicos estilos que se cargan son los estilos de los componentes en uso en un momento dado. No hay envío de estilos no utilizados. Cuando un componente muere, también lo hacen sus estilos.
- Alcance. Escribir nuevos estilos no puede afectar nada más en otros lugares del sitio, por lo que no hay necesidad de preocuparse por escribir un estilo que tenga consecuencias malas o no deseadas en otros lugares debido a un selector en el alcance global. Obtenemos protección de alcance con ideologías de nombres como BEM, pero no se aplica a las herramientas.
- Nombres sin preocupaciones. En algunos casos, no es necesario elegir un nombre de clase o ID para lo que se está diseñando, ya que la salida está contenida en la IU.
- Ergonomía del desarrollador. Puede ser bueno tener estilos en el mismo archivo (o muy cerca) del componente en sí. De la misma forma, algunos desarrolladores se sienten muy cómodos con JSX. Además, poder diseñar cosas sin preocuparse por el alcance significa que los desarrolladores pueden sentirse empoderados sobre el estilo en lugar de sentirse intimidados por él.
- Sistema de diseño amigable. Los sistemas de diseño tienen que ver con componentes y también React. Estos modos complementarios de pensamiento se alinean bastante bien entre sí.
- Posibilidades de JavaScript en CSS. Hacer esto con operadores lógicos y pasar valores y matemáticas y todo eso, tener todo el poder de JavaScript en los estilos es muy útil.
Y eso no es todo, pero puede ver por qué es atractivo para algunas personas. Ciertamente ha inspirado mucha discusión. ¿Por qué no cuando ofrece todos esos beneficios? Bueno, es un entorno de desarrollo muy diferente que no necesariamente encaja con todos. Requiere doblar la plataforma web para hacer cosas algo inusuales y eso viene con verrugas. Sin mencionar que tiene un costo literal (tamaño de los paquetes y demás) que pagan los usuarios, que es mejor que se pague por sí solo con eficiencia.
Dustin fue tan lejos como para construir una demostración usando Sass para diseñar cosas y compararlo con cómo se puede hacer con CSS-in-JS, lo que demuestra cómo se ven los estilos de migración y las posibilidades de hacerlo.