Video Summary and Transcription
Esta charla explora la evolución de CSS y el desarrollo de sistemas de estilo en la ingeniería de software. Discute las limitaciones de CSS y la necesidad de marcos de trabajo, preprocesadores y JavaScript para mejorar las capacidades de estilo. La charla destaca diferentes enfoques para el estilo CSS, incluyendo bibliotecas como Tailwind y Chakra UI. También introduce sistemas de estilo innovadores como Vanilla Extract y Rainbow Sprinkles, que ofrecen clases CSS optimizadas y seguridad de tipo. El orador enfatiza la importancia de los sistemas de diseño y anima a los desarrolladores a explorar y considerar las fortalezas y debilidades de diferentes sistemas de estilo.
1. Introducción a los Sistemas de Estilo Seguros por Tipo
Hola, gente. Soy Josh Goldberg y esto es Sistemas de Estilo Seguros por Tipo, el futuro de CSS. Soy un desarrollador y mantenedor de código abierto a tiempo completo, trabajando en el ecosistema de JavaScript TypeScript. También soy el autor del libro Aprendiendo TypeScript y un MVP de Microsoft para tecnologías de desarrollo.
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.
2. Introducción a HTML, CSS y Frameworks
Pasando a la charla, les daré una advertencia de que es una simplificación exagerada. Antes de Joomla y Drupal y PHP y WordPress y todo eso, está HTML. Los desarrolladores querían más. Entonces, añadimos CSS. Pero aún bastante débil y no muy potente. El CSS temprano era genial para lo que tenía en ese momento. Para sortear esta falta de potencia en CSS, añadimos frameworks. Bootstrap, por ejemplo, fue uno muy popular en su día. Y Bootstrap hizo que todo se viera bastante similar.
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
3. Preprocesadores CSS y CSS 3
Bootstrap fue uno de los frameworks que utilizó preprocesadores como LESS. Se desarrollaron preprocesadores CSS como SASS y SCSS para mejorar CSS. CSS 3 introdujo nuevas características como flexbox, facilitando el centrado de elementos. El ciclo de innovación de primitivas se repite en la industria. Las variables CSS, previamente utilizadas en preprocesadores, ahora son compatibles con todos los navegadores evergreen. La conclusión es que probablemente ya no necesites CSS.
usó Bootstrap. Y Bootstrap hizo que todo se viera bastante similar. Bootstrap también fue uno de los momentos de framework en los que usamos muchos preprocesadores, que todavía hacemos hasta este día. Echando un vistazo a este archivo de hace tiempo, esto está usando LESS, que es un antiguo preprocesador CSS. Podías hacer cosas como crear propiedades personalizadas o variables con este símbolo de arroba o de dólar. Y tenías estas funciones incorporadas como darken que modificarían tus colores o variables para ti. Y eso fue realmente agradable porque de nuevo CSS en ese momento era un poco débil. Hay un linaje interesante, creo con los preprocesadores CSS. Hay CSS, luego encima de eso teníamos hojas de estilo sintácticamente impresionantes o SASS, que a menudo se comparaba con Ruby porque tenían una sintaxis similar a esa en CoffeeScript. Luego tuvimos LESS que son hojas de estilo más delgadas. Parecía un poco más como CSS, a la gente le gustaba eso. Así que también nos subimos a ese patrón con SCSS que significa, lo adivinaste, Sassy CSS. Es una secuela, un predecesor de algunas de las cosas que tenemos hoy. Ahora, esto en realidad se parece bastante a los preprocesadores que vimos en el panorama de JavaScript. CoffeeScript salió con una sintaxis muy parecida a Ruby, y luego tenemos Babel y TypeScript que vienen después de eso que son un poco como less en que estaban más cerca del núcleo. De todos modos, al mismo tiempo, la gente estaba trabajando y pensando en futuras adiciones a CSS, y finalmente tuvimos CSS 3. Y todavía está saliendo hasta el día de hoy. Estamos agregando constantemente a nuevas áreas de CSS. Una de las cosas que puedes hacer en CSS que no podías tan fácilmente antes era centrar. ¡Increíble! Puedes usar esta nueva cosa impresionante llamada flex, y puedes decir, por ejemplo, que la altura de mi contenedor es del 100%, y es flex con centrado, horizontal y vertical. Así que no me gusta escuchar a la gente decir más, oh, es imposible centrar en CSS. Solía ser un poco difícil, pero trabajaron en ello. Y todo este ciclo que hemos visto aquí de primitivas y frameworks y todo esto se repite continuamente en nuestra industria y en otras. Y lo llamo el ciclo de primitivas innovation. Primero obtenemos un montón de primitivas como CSS que son mejores que lo que teníamos antes. Y luego ideamos sobre las dificultades comunes, encontramos alguna manera en el terreno del usuario para hacer algunas soluciones competidoras para ellas, digamos frameworks o meta procesadores. Y luego construimos eso en el lenguaje. Mientras CSS y less y SASS y SCSS están todos revoloteando, la gente trabaja en el futuro CSS. Y como ejemplo de eso en particular, ahora tenemos variables CSS. Puedes hacer esas cosas de arroba o signo de dólar de less y SASS solo en CSS Puro. Y esto es compatible con todos los navegadores evergreen. Lo que nos lleva a nuestra primera conclusión de la charla,
4. Innovación con JavaScript y CSS
La mayoría de los sitios web que utilizan CSS o un equivalente, lo utilizan para características que ahora existen en CSS. Probablemente ya no necesites un CSS, pero no definitivamente. Depende de ti. También innovamos en el espacio de front end con JavaScript. Primero comenzamos a jugar con jQuery. Luego agregamos una ronda de iteración. Luego llegamos a las arquitecturas impulsadas por componentes con Angular, Ember y React. Y para apoyar esta explosión de front ends dinámicos, agregamos formas de tener CSS dinámico. Una opción común y popular hasta el día de hoy son los módulos CSS. Necesitamos más. Echemos un vistazo a otro enfoque, componentes de estilo, o CSS y JS. Aquí, tenemos un contenedor, y luego H1, este par de elementos que se crean con estilo.
probablemente ya no necesites un CSS. No puedo decir definitivamente, hay características que se añaden encima de CSS. Pero a lo largo de mi tiempo en consultoría a tiempo completo, código abierto y demás, la mayoría de los sitios web que utilizan CSS o un equivalente, lo utilizan para características que ahora existen en CSS. La mayoría pero no todos. Así que, probablemente ya no necesites un CSS, pero no definitivamente. Depende de ti. De todos modos, también innovamos en el espacio de front end con JavaScript. Solía ser que simplemente hacías tu sitio web en HTML o algún lenguaje de servidor como PHP. Pero ahora tenemos front ends basados en JavaScript. Primero comenzamos a jugar con jQuery. De nuevo, esta charla es una simplificación. Luego añadimos una ronda de iteración. Como background y knockout que hicieron las cosas realmente dinámicas. Luego llegamos a las arquitecturas impulsadas por componentes con Angular y Ember y React. Luego innovamos en eso con más Angular y solid y Svelte y React y Vue. Y para apoyar esta explosión de front ends dinámicos, añadimos formas de tener CSS dinámico.
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,
5. Estilización con JavaScript y CSS
Puedes definir tu CSS en tu JS utilizando variables de JavaScript o código TypeScript. Este enfoque funciona pero puede ser desafiante escalarlo con sitios web complejos. Los desarrolladores hoy en día tienen cuatro necesidades principales para la estilización: comodidad, asistencia, refactorización y tematización. Sin embargo, el rendimiento a menudo se pasa por alto. Los componentes de estilo R cart/cart P pueden ser difíciles de manejar debido a las cadenas brutas.
este par de elementos que se crean con styled. y luego el nombre de la etiqueta, y luego defines tu CSS en tu JS. Entonces, en lugar de usar variables CSS, podrías simplemente usar variables JavaScript o código TypeScript. Aquí tenemos color de fondo, que se interpola en la cadena H1. Esto es realmente ingenioso. Creo que es bastante inteligente. Si quieres dinamismo, puedes agregar estos componentes de prop, como $pressed, donde se convierte en runtime, lo que necesites que sea. Entonces, esto funciona. Y todavía veo sitios web haciendo esto. Pero puede ser difícil de escalar, porque añadimos algunos front ends de JavaScript realmente hermosos y elegantes.
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
6. Enfoques Alternativos para la Estilización con CSS
Otro enfoque que realmente apoyé en su día fue una familia de bibliotecas ejemplificadas, creo, por Glamour, que era una utilidad que te permitía pasar un objeto de estilos a la función CSS, que luego escupía clases para ti. Curiosamente, esto fue hecho por Sunil Pai, quien terminó haciendo mucho trabajo en React, y ahora trabaja en PartyKit. Pero otro enfoque que a muchos les gusta hoy en día es Tailwind. Aunque no es mi preferido, Tailwind es bastante genial. Es muy conveniente. Si quieres ser dinámico, bueno, hay cadenas. Otra ventaja de Tailwind es que sus documentos son fantásticos.
para resaltar la sintaxis, como CSS. Otro enfoque que realmente apoyé en su día fue una familia de bibliotecas ejemplificadas, creo, por Glamour, que era una utilidad que te permitía pasar un objeto de estilos a la función CSS, que luego escupía clases para ti. Pensé que eso era realmente ingenioso. Me gustó cómo mezclaba CSS, como en estos son solo propiedades CSS al final del día, con buenos primitivos JavaScript, TypeScript con los que todavía estás trabajando en tu código JSTS. Y si quieres cosas dinámicas, podrías, bueno, en lugar de usar un objeto simple, tener una función que devuelve ese objeto simple CSS que toma props.
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.
7. Sistemas de Estilo Avanzados: Chakra UI y Tematización
Tailwind es un buen sistema de estilo, pero tiene limitaciones. Voy a discutir opciones más avanzadas, como Chakra UI, que te permite definir estilos como props en los componentes. Este enfoque es accesible, bien documentado y soporta la tematización. Representa el epítome de lo que podrían ser los sistemas de estilo.
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
8. Chakra UI y Sistemas de Estilo
Chakra UI es una biblioteca de componentes que también expone un sistema de estilo. Tiende a complicarse al intentar hacer todas esas cosas. Tailwind es solo el sistema de estilo, proporcionando colores crudos y primitivas. Chakra UI proporciona mucho y es popular, pero hay innovaciones más interesantes ocurriendo en los sistemas de estilo. Una innovación emocionante es Vanilla Extract, donde defines tokens y los usas para crear clases para componentes.
tokens del sistema como componentes. Como props de componentes. Chakra en realidad hace algo bastante inteligente dentro para obtener autocompletado en estas props. Define muchos valores de cadena como la unión, o todas las diferentes cadenas posibles, esos literales. Y luego también agrega cadena y objeto vacío allí en ese tipo de TypeScript. Lo que te permite obtener autocompletado en las props, pero desafortunadamente también permite cualquier valor posible. Entonces, es un poco desafortunado que puedas usar ese pequeño truco de TypeScript y luego perder un poco de seguridad de tipo. Es conveniente porque significa que puedes especificar los valores que quieras. Pero los tipos de token aquí no son estrictos, lo cual es un poco una solicitud de característica que tengo como usuario de TypeScript a muchos de estos sistemas de estilo. Ahora, diré que el equipo de Chakra UI es genial. Esto no es una crítica a Chakra. Ellos están realmente trabajando en este problema. Es bastante difícil. Entonces, en serio, amor al Chakra y a las personas que han estado trabajando en esto. Pero está un poco lejos de ser la forma principal de usar Chakra en producción. No pude encontrarlo en el sitio de Chakra. Así que, aunque sé que se están haciendo progresos, en su núcleo, Chakra UI es una biblioteca de componentes que también expone un sistema de estilo, lo que significa que tiende a complicarse un poco al intentar hacer todas esas cosas. Mirándolo visualmente, Bootstrap era un sistema de estilo que también exponía algunos componentes pequeños, como insignias y botones. Tailwind es solo el sistema de estilo. Solo te proporciona los colores crudos y la forma de personalizarlos y usarlos por tu cuenta. Colores y otras primitivas. Chakra UI proporciona mucho, lo cual es genial. Muchos sitios web están totalmente bien solo usando Chakra UI. Si necesitas una biblioteca de componentes encima de Tailwind, existe Tailwind UI. Pero quiero centrarme en donde creo que las innovaciones realmente interesantes están ocurriendo. Quiero centrarme en los sistemas de estilo. Porque los cimientos sobre los que construimos nuestras bibliotecas de componentes son realmente interesantes. Y una innovación realmente emocionante de la que quiero hablar ahora es Vanilla Extract. Este es un tipo de nuevo enfoque para las bibliotecas en los últimos tres a cinco años que he empezado a ver que se vuelven más populares. Lo que haces es definir tus tokens y marcas de JavaScript, la forma en que uno construiría un sistema de diseño. Digamos que tienes tus primitivas de color o tu espacio. Y luego usas esos para crear
9. Vanilla Extract y Rainbow Sprinkles
En el mundo de Vanilla Extract, puedes usar nombres de clases en tus componentes y se convierten en clases CSS bien optimizadas. Incluso utilizan variables CSS para la tematización. Si cometes un error, Property Wet puede darte un error de tipo. Vanilla Extract es un sistema de estilo innovador. La biblioteca Rainbow Sprinkles de Wayfair, construida sobre Vanilla Extract, te permite crear cajas con valores dinámicos. Es nuevo y experimental, y los sistemas de estilo seguros por tipo están en camino.
clases para tus componentos utilizando el marco. En el mundo de Vanilla Extract el lado derecho de la pantalla estaría en tu archivo .css .ts. Y luego, de manera similar a Glamour antes, puedes usar esos nombres de clases en tus componentes. Y detrás de escena se convierte en todas estas agradables clases CSS idiomáticas bien optimizadas. Incluso utilizan variables CSS para la tematización. Y una ventaja realmente agradable de estos que me emociona mucho es que si te equivocas, si escribes el nombre incorrecto, porque todo es JavaScript y TypeScript en el interior, Property Wet puede darte un error de tipo. ¡Increíble! Amo typescript. Qué placer.
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.
10. Opiniones sobre los Sistemas de Diseño y CSS
Comienza a experimentar. Personalmente, creo que la mayoría de los proyectos deberían usar un sistema de diseño y separar los tokens de la lógica de la aplicación. Cada sistema importante tiene sus fortalezas y debilidades. Es importante tener opiniones matizadas y considerar ventajas y desventajas. Consulta los enlaces para obtener más información.
Anímate. Comienza a experimentar. Al final, mostraré algunos recursos, pero ten cuidado, algunas cosas son nuevas. Ahora, porque tengo un minuto y estamos hablando sobre CSS y cosas así, me siento extrañamente obligado a mencionar mis opiniones aquí. Las tengo. Entonces, estas son solo mis opiniones. Por favor, no pienses en mí como el pensamiento policía, o tratando de ser la policía del pensamiento o lo que sea. Esta es solo mi perspectiva.
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.
Comments