Sistemas de Estilo Seguros por Tipo: El Futuro de CSS

Hola, gente. Soy Josh Goldberg y esto es Sistemas de Estilo Seguros por Tipo, el futuro de CSS. Un poco sobre mí primero. Hola. Soy un desarrollador y mantenedor de código abierto a tiempo completo. Trabajo en el ecosistema de JavaScript TypeScript, más notablemente TypeScript ESlint, la herramienta que te permite ejecutar ESlint y Prettier y otras herramientas de JavaScript en tu código de TypeScript. Así que probablemente estoy ejecutándome en tu máquina de desarrollo de alguna manera. También soy el autor del libro Aprendiendo TypeScript, y MVP de Microsoft para tecnologías de desarrollo. Así que contáctame en línea, en persona, donde sea, si quieres hablar sobre cualquiera de esas cosas.

Pasando a la charla, les daré una advertencia de que es una simplificación exagerada. Hay todo tipo de cosas como Foundation y Joomla y Material UI que son relevantes y no cubro. Pero solo tenemos 20 minutos. Así que comencemos. Antes de Joomla y Drupal y PHP y WordPress y todo eso, está HTML. HTML era genial. HTML era sencillo. Esto es un H uno, un encabezado uno con un hola mundo. Era simple. Al principio, no había forma de dar estilo a tu documento. Este es tu documento. En los navegadores modernos, texto negro, fondo blanco. Hermoso, simple. Pero los desarrolladores querían más. Los desarrolladores querían estilos. Entonces, de nuevo, simplificando, añadimos CSS, hojas de estilo en cascada. Ahora puedes describir, aha, mi H uno es elegante y tengo este color y este fondo. Así que puedes hacer que tu H uno se vea así con este texto centrado. Increíble. Pero aún bastante débil y no muy potente.

Ahora, el CSS temprano era genial para lo que tenía en ese momento antes de él. Pero aún era bastante débil y no muy bien equipado. Y mucha gente hacía chistes sobre él. Uno de mis memes favoritos si buscas viejos chistes malos de CSS es este de Peter Griffin con las cortinas. Entonces, para sortear esta falta de potencia en CSS, añadimos frameworks. Los frameworks ayudaron tanto con HTML como con CSS. Bootstrap, por ejemplo, fue uno realmente popular en su día. Cualquiera que estuviera haciendo desarrollo web probablemente tiene algún recuerdo en ese momento de contenido o contenedor, contenedor fluido. Y las personas que usaban Internet hace mucho tiempo probablemente recuerdan que la mitad de los sitios web por ahí se veían más o menos así, porque todos

Una opción común y popular hasta el día de hoy son los módulos CSS, donde defines tu CSS en algún archivo. En este ejemplo, he estado usando SCSS para variables. Eso era popular en el pasado. Y luego en tu archivo de JavaScript o React, importas los estilos y los usas como variables. Aquí tenemos algo similar a lo que se hizo antes, donde tenemos nuestros colores y padding almacenados en una variable SCSS, y luego nuestro CSS se refiere a ellos. Y si quieres que tu lado de JavaScript sea dinámico en qué clase se trae, puedes decir que uses una utilidad como CX o nombres de clase que toman un montón de cosas que son cadenas o cosas falsas o objetos o arrays y demás, y luego los une todos en un nombre de clase. En este ejemplo, el botón añade la clase styles.pressed si fue presionado. Y esto funciona. Honestamente, muchos de mis sitios que escribo hasta el día de hoy usan módulos CSS. Para sitios web sencillos, o para aquellos que no cambian mucho, esto está bien. Pero, necesitamos más. Siempre hay sitios web más sofisticados saliendo por ahí. Así que, echemos un vistazo a otro enfoque, componentes de estilo, o CSS y JS. Personalmente usé emoción, que era un competidor de estilo, un poco más, pero están alrededor de lo mismo. Aquí, tenemos un contenedor, y luego H1,

Mira este hermoso sitio web aquí para esta masterclass. Tenemos esta página de inicio dinámica con esta cosa de encabezado en la parte inferior. Y luego dentro del sitio web, tenemos todos estos componentes dinámicos con modales y fuentes similares pero diferentes colores a veces. ¿Y sabes qué? Son complicados, estos sitios web que la gente está haciendo. Los desarrolladores de hoy tienen necesidades de estilización interconectadas y en competencia. Y diría que se pueden categorizar en estas cuatro necesidades aproximadamente. La estilización necesita ser conveniente. Necesita ser fácil o al menos sencillo para escribir nuevos estilos. No tienes que saltar a través de tres cajas en un nuevo archivo. Debería ser asistible. El IDE debería darte autocompletados y hacerte saber cuando te equivocas. Debería ser refactorizable. Si quieres, digamos cambiar un color o cambiar la barra DAB de arriba a abajo, debería ser relativamente sencillo hacerlo. Y debería ser tematizable. La gente estos días siempre está mirando el modo claro versus el modo oscuro y el alto contraste de color y todas las demás formas de cambiar los colores.

Ahora, estos cuatro se pierden una preocupación muy importante. Performance, que creo que es importante. La gente generalmente está de acuerdo en que es importante, pero a menudo es difícil presupuestar para ello. Pero divago. Los componentes de estilo R cart/cart P, eh, no son geniales en mi opinión. Puede ser difícil lidiar con esas cadenas brutas, incluso si tu IDE tiene una extensión

Curiosamente, esto fue hecho por Sunil Pai, quien terminó haciendo mucho trabajo en React, y ahora trabaja en PartyKit. Felicidades de nuevo a PartyKit por ponerme en marcha. Realmente emocionante. Y desafortunadamente, Glamour no ha tenido un commit en años. Así es el código abierto. Pero otro enfoque que a muchos les gusta hoy en día es Tailwind. Y no te preocupes. No estoy terminando con Tailwind. Sé que esto es un tema controvertido de hablar. Aunque no es mi preferido, Tailwind es bastante genial. Es muy conveniente. Quiero decir, todo lo que tienes que hacer es declarar tus clases en estas cadenas. Y se aplican. Y luego el procesador de Tailwind puede optimizar tu performance. Es bastante genial. Si quieres ser dinámico, bueno, hay cadenas. Así que, puedes concatenarlas. Si tienes este estado de botón presionado, puedes usarlo para concatenar diferentes cadenas. Ahora, hay extensiones a Tailwind que hacen esto un poco más bonito, pero esta es la forma más común que he visto a la gente hacerlo en la vida real.

Otra ventaja de Tailwind es que sus documentos son fantásticos. En serio, felicidades al equipo de documentación de Tailwind. Hacéis un buen trabajo. Hace que sea mucho más fácil trabajar en CSS o en la estilización en general cuando tienes documentos fantásticos. Así que, sí, diría que Tailwind es una buena solución para el carro. Es conveniente, es asistible, es refactorizable, es tematizable, tiene soporte incorporado.

Tailwind es en realidad un sistema de estilo bastante bueno. Generalmente soporta lo que necesitamos, y la mayoría de los sitios web hoy en día, creo, están totalmente bien para ser construidos en Tailwind. Pero tengo algunas quejas. Tailwind no es de primera clase para TypeScript, por eso voy a hablar de algunas cosas más después de esto que sí lo son. Tailwind es una extensión en la parte superior de CSS fundamentalmente. Te permite definir un montón de clases con sus primitivas y luego trabajar con ellas. Pero eso significa que cosas como esta son muy difíciles de detectar como errores o no errores. ¿Cómo sabe Tailwind si lo que es una clase incorporada o una clase que definiste o inexistente. Así que quiero pasar de Tailwind. Quiero hablar de algunas bibliotecas que son un poco más sofisticadas que ella. Y a estas las llamo bibliotecas de componentes. Echa un vistazo a una popular, Chakra UI. Así es como harías algo similar a lo que vimos en la diapositiva de Tailwind con Chakra. Chakra proporciona un montón de componentes, como una caja, que es una de propósito general y luego algunas más específicas como el encabezado. Y en lugar de definir tus estilos como cadenas de clase, en realidad los defines como props en los propios componentes. Caja, flex. Un artículo de línea igual al centro. Que creo que es un enfoque realmente agradable. Es súper accesible en el IDE. Está bien documentado. Si quieres dinamismo, bueno, de nuevo, son solo props, solo CSS y JS. Así que puedes hacer eso. Y con Tailwind también, puedes tematizarlos. Tailwind y Chakra y Simbler todos soportan las ideas de temas de color. Que es, creo, una idea realmente buena. Que si tienes, digamos, un color de marca, lo usas en tus componentes en lugar de codificarlo en un específico código hexadecimal. Y quiero profundizar un poco en esto. Porque personalmente, creo que esto es el epítome de lo que podrían parecer muchos sistemas de estilo. Tienes tus componentes, puedes decir qué etiqueta DOM representan, y luego puedes especificar tus props, que deben adherirse a tu diseño

Entonces, esto no hace tanto por ti. Este es solo el sistema de estilo. Pero es una forma realmente innovadora de ver las cosas. Y estoy emocionado al respecto. Espero que sigamos trabajando en cosas como Vanilla Extract y construyendo bibliotecas de componentes sobre ellas. Pero quiero más. Siempre hay más que se puede hacer. Una última cosa genial es una biblioteca bastante experimental de Wayfair sobre Vanilla Extract llamada Rainbow Sprinkles. Rainbow Sprinkles te permite configurar Vanilla Extract de la misma manera. Este es el mismo código de la diapositiva anterior. Pero luego también puedes crear esta caja de abstracción sobre ella, este concepto de Rainbow Sprinkles, donde estás describiendo cuál de tus propiedades se alinean con el DOM, los atributos nativos, los elementos de línea son solo CSS crudo, o tienen vars.color u otra variable, como con el fondo aquí. Y luego eso te permite construir cajas, algo así como las cajas de Chakra UI, donde tienes caja alinea los elementos al centro, display igual a flex, pero luego la caja en el interior dice fondo igual a fondo. Y similar a Chakra, si quieres valores dinámicos, refiérelos en la planta de JavaScript. Sí, genial. Creo que esto es realmente genial. ¿Y podemos incluso atrapar qué, verdad? No, no es seguro por tipo. No pude encontrar una manera de hacerlo seguro por tipo. Entonces, es muy nuevo y experimental. Y no es lo único que hace esto. Por ejemplo, los componentes de estilo tienen este constructor realmente impresionante llamado sistema de estilo. Los sistemas de estilo seguros por tipo están en camino. Pero pasará un poco de tiempo antes de que estén super listos.

Personalmente, creo que básicamente todos, no todos, pero la mayoría de los proyectos pequeños o más grandes que pequeños probablemente deberían usar un sistema de design. Al menos, intenta separar los tokens de tu aplicación lógica. Te ahorrará mucho tiempo si usas tus variables de marca, tus colores al menos, en lugar de definir valores brutos en línea. Si alguna vez tienes que cambiarlos, es mucho más fácil.

También creo que los tres sistemas principales que mostré, usando CSS por sí solo, tailwind, sistemas de estilo, CSS y JS en general, cada uno tiene sus fortalezas y debilidades. Es realmente difícil hacer una afirmación de que alguno es universalmente bueno o malo. Porque, honestamente, todos seguimos iterando. Todos estamos mejorando. Lo que se considera genial hoy probablemente se considerará mediocre en el mejor de los casos en 10 años. Entonces, si ves a alguien hacer una declaración de que tailwind es malo o Chakra es bueno o lo que sea, recomendaría que si no lo sabes o al menos crees que es cierto, o más específicamente si no has hecho un esfuerzo de buena fe para validar que es cierto, por favor no amplifiques la opinión. De nuevo, esta es solo mi perspectiva en el discurso en línea. Pero cosas como tailwind malo, tailwind la única opción aceptable, verdaderos devs, inserta cosa aquí, no me gusta esto. Creo que es un poco superficial. Personalmente me inclinaría hacia opiniones matizadas. Como prefiero una cosa sobre o bajo otra cosa por razones. Siempre hay ventajas y desventajas. Esas son solo mis opiniones. Así que vamos a cerrar. Tengamos algunos pensamientos. Tengo enlaces interesantes en estas diapositivas aquí que también están enlazados en mi sitio web a los documentos de vanilla extract, los documentos de wayfare para rainbow sprinkles. Tengo ejemplos de código para todas las diapositivas de código que mostré. Y también gamut es el sistema de design de Codecademy que utiliza muchas de las características de estilo glamour o vanilla extract. Lo cual me emociona mucho. Así que si quieres hablar conmigo sobre código abierto de nuevo, siempre estoy feliz de charlar. Así que gracias a todos. Esto ha sido divertido.