Building a Design System Without Recreating CSS
I design system spesso cadono in una trappola.
Inizi aggiungendo classi utility. Aggiungi opzioni responsive. Aggiungi helper per il layout. Presto, avrai creato una nuova sintassi. Finirai per fare esattamente ciò che il CSS fa già.
Smetti di cercare di sostituire il CSS.
Invece, costruisci uno strato sopra il CSS. Concentrati sull'intento.
Gli sviluppatori vogliono flessibilità. Ma la flessibilità porta complessità. Molti sistemi espongono ogni breakpoint e ogni opzione di layout. Questo rende il markup difficile da leggere. Il tuo codice passa più tempo a descrivere come costruire un layout che cosa il layout faccia effettivamente.
Il sistema diventa difficile da comprendere perché cerca di descrivere tutto.
Cambia il tuo approccio. Pensa meno a come viene costruito un layout. Pensa di più a ciò che il layout realizza.
Guarda questo esempio:
Questo non sostituisce il CSS. Esprime un intento.
- Il contenuto si adatta a una griglia.
- Su mobile, si dispone in stack.
L'implementazione rimane all'interno del sistema. Non si tratta di aggiungere più astrazione. Si tratta di una migliore comunicazione.
I buoni valori predefiniti sono migliori di una configurazione infinita. La maggior parte dei layout segue pattern comuni. La maggior parte degli sviluppatori vuole organizzare i contenuti, non inventare nuovi sistemi di layout.
Un design system dovrebbe fornire valori predefiniti ponderati. Se provi a esporre ogni funzionalità del CSS, perdi. Il CSS è già potente e standardizzato.
Il compito di un design system è:
- Ridurre il carico cognitivo.
- Creare coerenza.
- Comunicare l'intento.
- Rendere semplici i pattern comuni.
Poniti questa domanda quando progetti delle API: "Riuscirò a capire questo tra sei mesi?"
Non chiederti:
- "Posso configurare tutto?"
- "Posso supportare ogni caso limite?"
La leggibilità scala. La complessità no.
La semplicità non è un limite. L'obiettivo è collocare il potere dove deve stare. I flussi di lavoro comuni dovrebbero rimanere semplici. I flussi di lavoro avanzati devono rimanere possibili.
I migliori design system creano un linguaggio condiviso. Si concentrano sull'intento invece che sull'implementazione. Aiutano gli sviluppatori a comunicare lo scopo.
Gli sviluppatori non vogliono costruire layout. Vogliono costruire prodotti. Il layout è solo una parte del lavoro.
Fonte: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41