Sistemas de Estilo Seguros por Tipo: El Futuro de CSS

Rate this content
Bookmark

La mayoría de los desarrolladores de CSS hoy en día escriben estilos visuales en términos de lo que literalmente ves: valores de color exactos, números de tamaño, y así sucesivamente. Pero, ¿y si pudieras escribir estilos como una función de cómo encajan en tu sistema de diseño? ¿Y si pudieras obtener seguridad de tipo al especificar y usar esos valores, incluyendo en props responsivas?

Esta charla se sumergirá en algunas de las características clave y defectos en muchos constructores de sistemas de diseño hoy en día como Chakra UI y Tailwind. Estableceremos cuáles deberían ser los mejores próximos pasos para los sistemas de diseño con APIs de TypeScript seguras por tipo y rendimiento tanto para páginas preconstruidas como en tiempo de ejecución.

Josh Goldberg
Josh Goldberg
22 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

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.

Available in English

1. Introducción a los Sistemas de Estilo Seguros por Tipo

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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

Short description:

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.
React's Most Useful Types
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
Top Content
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Stop Writing Your Routes
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
Full-stack & typesafe React (+Native) apps with tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
Faster TypeScript builds with --isolatedDeclarations
TypeScript Congress 2023TypeScript Congress 2023
24 min
Faster TypeScript builds with --isolatedDeclarations
Top Content
Type-checking a TypeScript codebase can be slow, especially for monorepos containing lots of projects that each need to use the type checker to generate type declaration files. In this talk, we introduce — for the very first time — a new TypeScript feature we are working on called “Isolated Declarations” that allows DTS files to be generated without using the type checker at all! This opens the door to faster declaration generation in TypeScript itself, as well as in external tools written in other languages such as ESBuild and swc. You'll see how to use this new option, and maybe (just maybe) you’ll be convinced about the benefits of explicit return types! Most importantly, we will show how Isolated Declarations enables parallel builds to spread work across your CPU cores to significantly improve the build speed of your TypeScript projects.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Deep TypeScript Tips & Tricks
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
Practice TypeScript Techniques Building React Server Components App
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
Maurice de Beijer
Maurice de Beijer
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Advanced TypeScript types for fun and reliability
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
Maurice de Beijer
Maurice de Beijer
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced
Mastering Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.