Construindo um Design System Sem Recriar o CSS
Design systems frequentemente caem em uma armadilha.
Você começa adicionando classes utilitárias. Adiciona opções responsivas. Adiciona auxiliares de layout. Logo, você constrói uma nova sintaxe. Você acaba fazendo exatamente o que o CSS já faz.
Pare de tentar substituir o CSS.
Em vez disso, construa uma camada acima do CSS. Foque na intenção.
Desenvolvedores querem flexibilidade. Mas a flexibilidade traz complexidade. Muitos sistemas expõem cada breakpoint e opção de layout. Isso torna o markup difícil de ler. Seu código passa mais tempo descrevendo como construir um layout do que o que o layout faz.
O sistema torna-se difícil de entender porque tenta descrever tudo.
Mude seu foco. Pense menos em como um layout é construído. Pense mais no que o layout realiza.
Veja este exemplo:
Isso não substitui o CSS. Isso expressa intenção.
- O conteúdo se adapta a um grid.
- No mobile, ele empilha.
A implementação permanece dentro do sistema. Não se trata de mais abstração. Trata-se de uma melhor comunicação.
Bons padrões são melhores do que configurações infinitas. A maioria dos layouts segue padrões comuns. A maioria dos desenvolvedores quer organizar conteúdo, não inventar novos sistemas de layout.
Um design system deve fornecer padrões bem pensados. Se você tentar expor cada capacidade do CSS, você perde. O CSS já é poderoso e padronizado.
O trabalho de um design system é:
- Reduzir a carga cognitiva.
- Criar consistência.
- Comunicar intenção.
- Facilitar padrões comuns.
Faça a si mesmo esta pergunta ao