ótima observação Thiago Sobrinho,

é a abordagem exata do TailwindCSS com a diretiva "@apply":

e com documentação como essa, ajuda bastante:

o que eu acho bacana dessa abordagem com css, é que você define todos os "design tokens" separadamente (typography/colors/space etc), e qualquer atom/molecules/organisms etc (atomic design) é uma composição dos "design tokens".

O mais importante: você define todos os valores CSS do seu tema/marca. Seu time e você, não precisam escrever mais nenhum CSS desnecessário, o trabalho futuro é compor esses valores.

prototipação e experimentações se tornam fáceis e MUITO rápidas depois de memorizar os utilitários básicos (tanto para designers quanto para devs), e, após a confirmação visual/comportamento do componente, é possível criar essa referência virtual utilizando os utilitários básicos

ex: ".btn { @apply .f1 .f2 }" etc

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store