Construir un sistema de diseño sin recrear CSS
Los sistemas de diseño suelen caer en una trampa.
Empiezas añadiendo clases de utilidad. Añades opciones responsivas. Añades ayudantes de diseño. Pronto, construyes una nueva sintaxis. Terminas haciendo exactamente lo que CSS ya hace.
Deja de intentar reemplazar CSS.
En su lugar, construye una capa por encima de CSS. Céntrate en la intención.
Los desarrolladores quieren flexibilidad. Pero la flexibilidad trae complejidad. Muchos sistemas exponen cada breakpoint y cada opción de diseño. Esto hace que el marcado sea difícil de leer. Tu código pasa más tiempo describiendo cómo construir un diseño que lo que el diseño hace.
El sistema se vuelve difícil de entender porque intenta describirlo todo.
Cambia tu enfoque. Piensa menos en cómo se construye un diseño. Piensa más en lo que el diseño logra.
Mira este ejemplo:
Esto no reemplaza a CSS. Expresa una intención.
- El contenido se adapta a una cuadrícula.
- En dispositivos móviles, se apila.
La implementación permanece dentro del sistema. No se trata de más abstracción. Se trata de una mejor comunicación.
Los valores predeterminados adecuados son mejores que una configuración interminable. La mayoría de los diseños siguen patrones comunes. La mayoría de los desarrolladores quieren organizar contenido, no inventar nuevos sistemas de diseño.
Un sistema de diseño debe proporcionar valores predeterminados bien pensados. Si intentas exponer cada capacidad de CSS, pierdes. CSS ya es potente y está estandarizado.
El trabajo de un sistema de diseño es:
- Reducir la carga cognitiva.
- Crear consistencia.
- Comunicar la intención.
- Facilitar los patrones comunes.
Hazte esta pregunta al diseñar APIs: "¿Podré entender esto dentro de seis meses?"
No preguntes:
- "¿Puedo configurarlo todo?"
- "¿Puedo soportar cada caso límite?"
La legibilidad escala. La complejidad no.
La simplicidad no es una limitación. El objetivo es colocar el poder donde pertenece. Los flujos de trabajo comunes deben permanecer simples. Los flujos de trabajo avanzados deben seguir siendo posibles.
Los mejores sistemas de diseño crean un lenguaje compartido. Se centran en la intención en lugar de la implementación. Ayudan a los desarrolladores a comunicar su propósito.
Los desarrolladores no quieren construir diseños. Quieren construir productos. El diseño es solo una parte del trabajo.
Fuente: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41