Quizás el uso más básico y obvio de las propiedades personalizadas de CSS son los tokens de diseño. Colores, fuentes, espacios, tiempos y otras partes atómicas de diseño de las que puede extraer al diseñar un sitio. Si prácticamente solo extrae valores de tokens de diseño, se dirigirá hacia un diseño limpio y ese aspecto profesional consistente que suele ser el objetivo en el diseño web. De hecho, he escrito que creo que es exactamente esto lo que contribuye a la popularidad de los marcos de clase de utilidad:
Yo diría que parte de esa popularidad se debe al hecho de que si eliges entre estas clases preconfiguradas, el diseño termina siendo bastante agradable. No puedes salirte de los rieles. Está eligiendo entre una selección limitada de valores que han sido diseñados para verse bien.
Estoy diciendo esto (con una hoja de estilo que define estas clases como tokens de trabajo de estilo único):
<h1 class="color-primary size-large">Header<h1>… es una propuesta de valor similar a esta:
html {
--color-primary: green;
--size-large: 3rem;
/* ... and a whole set of tokens */
}
h1 {
color: var(--color-primary);
font-size: var(--size-large);
}Hay versiones de construcción cero de ambos. Por ejemplo, Tachyons es una hoja de estilo de lo que es lo que es con una gran cantidad de clases de utilidad que acaba de usar, mientras que Windi es una cosa completamente elegante con un compilador justo a tiempo y tal. Pollen es una biblioteca de propiedades personalizadas que es lo que es, mientras que el nuevo Open Props tiene un compilador justo a tiempo para entregar solo las propiedades personalizadas que se utilizan.
¡Bien, entonces, Open Props!
Todo es literalmente solo un montón de propiedades personalizadas de CSS que puede usar para diseñar cosas. Es como un gran punto de partida para tus estilos. Es decir propiedad personalizada todas las cosas, pero de la forma en que ya estamos acostumbrados con los tokens de diseño, donde hay un número limitado predeterminado de opciones.
Las analogías son claras para la gente:
Open Props: una nueva biblioteca CSS de la increíble @argyleink.
Es Tailwind pero con variables CSS.https: //t.co/21pxE2bjW7
– David East (@_davideast) 1 de diciembre de 2021
Supongo que lo que atraerá a la gente a esto son los hermosos valores predeterminados.
30 hermosos degradados hechos a mano, usados simplemente como `var (–gradient-1)` https://t.co/LISp4eoeS1 pic.twitter.com/d7Tr113nRI
– Adam Argyle (@argyleink) 1 de diciembre de 2021
Lo que no hace es evitar que tengas que nombrar cosas, que es algo que sé que los amantes de la clase de servicios públicos realmente disfrutan. Aquí, necesitará continuar usando selectores CSS tradicionales (como con las clases con nombre) para seleccionar cosas y diseñarlas como lo haría “normalmente”. Pero en lugar de crear a mano sus propios valores, está extrayendo valores de estas propiedades personalizadas.
Toda la base (puede ver la fuente aquí) avanza a 4.4kb a través del cable (eso es lo que mostraron mis DevTools, de todos modos). Eso no incluye el CSS que escribe para usar las propiedades personalizadas, pero es una pequeña cantidad de gastos generales. Hay PropPacks adicionales que aumentan el tamaño (pero también son súper pequeños), y si está preocupado por el tamaño, de eso se trata todo el asunto del justo a tiempo. Puedes jugar con eso en StackBlitz.
¡Me parece muy dulce! Yo lo usaría. Me gusta que, en última instancia, sea solo CSS normal, por lo que no hay nada que no puedas hacer. Te mantendrás en buena forma a medida que evolucione CSS.