El rey de los críticos aquí, tiene un punto válido. No está equivocado. Puede ser muy frustrante cuando intentas hacer un pequeño ajuste de dos píxeles a un componente. Y luego te das cuenta de que de repente tienes que hacer 10 ajustes más. Es frustrante. Lo entiendo. Y esa es solo una de las razones por las que estamos construyendo Joy UI, que es una nueva biblioteca hermana de Material UI que implementa nuestro propio sistema de diseño junto con algunas innovaciones de vanguardia en la experiencia del desarrollador.
Y esto es más evidente, creo, en la forma en que hemos construido Joy UI para manejar las variables CSS. Entonces, ¿qué es una variable CSS? Según MDN, las variables CSS son entidades definidas por los autores de CSS que contienen valores específicos para ser reutilizados en todo un documento. Es fácil de entender en el contexto de los colores de marca, ¿verdad? Tienes un conjunto de colores que se reutilizarán en todo el diseño. Y si necesitas cambiar uno, es mucho más simple si tienes una única fuente de verdad para no tener que buscar y reemplazar cientos de instancias del código hexadecimal incorrecto. Tener esa única fuente de verdad es muy poderoso. Y una de las cosas realmente geniales es que puedes nombrar tus variables, ¿verdad? Ayuda mucho a mantener la consistencia en tu sistema de diseño y a proteger tu código en el futuro. En lugar de tratar de averiguar por qué este texto tiene un tamaño de 1.75 rem, puedes ver que tiene este valor dinámico establecido en encabezado de texto, lo que te brinda mucha más información sobre por qué se ha aplicado ese estilo.
Y a medida que te adentras más en el tema, te das cuenta de que las variables CSS tienen algunas aplicaciones realmente interesantes en nuestros sistemas de diseño que van mucho más allá del simple branding. Aquí tienes un ejemplo de lo que está sucediendo en el componente JoyUI, el componente de entrada, que compartí hace unos pocos diapositivas atrás. Es extraño, ¿verdad? Al principio es un poco difícil acostumbrarse. Quiero decir, ¿qué está pasando aquí? Tenemos variables CSS que hacen referencia a otras variables y realizan cálculos matemáticos basados en esas variables. Y todo esto sucede en CSS, ¿verdad? Como señala Josh Como, simplemente no estamos acostumbrados a este concepto, este modelo mental de definir propiedades CSS que tienen valores dinámicos. Y las cosas se vuelven aún más extrañas cuando comienzas a hacer matemáticas con tus variables y hacer referencia a variables dentro de variables. De hecho, en el caso de JoyUI, estamos utilizando variables CSS para crear componentes que pueden adaptar automáticamente sus estilos para que coincidan con los de sus padres e hijos, ya que todos hacen referencia a esa única fuente de verdad para sus números mágicos. Entonces, está bien, suena genial, pero ¿qué diferencia realmente hace, verdad? Consideremos un componente de interruptor y observemos las diferencias en la experiencia del desarrollador entre Material UI y JoyUI. Aquí tienes algunos ejemplos de interruptores.
Estos son todos interruptores de Material UI. Interruptor, obviamente, un simple interruptor de encendido y apagado, está compuesto por una pista y un pulgar. El usuario hace clic en el pulgar para deslizarlo a través de la pista y hacer su selección. Es bastante simple en la superficie, pero puede resultar bastante molesto cuando necesitas hacer ajustes perfectos de píxeles al componente de Material UI. Por ejemplo, si necesitamos cambiar el ancho de la pista aquí, bueno, eso descoloca por completo el pulgar porque no conoce la longitud de la pista. Y si intento cambiar el tamaño del pulgar, bueno, eso también arruina su posición. Y ni siquiera me hagas empezar con los radios de borde. Si necesito ajustar las esquinas redondeadas, no es como si simplemente pudiera pasar los mismos valores a ambas partes.
Comments