CSS mais fácil

Damien Riehl é um advogado especializado em tecnologia e também um músico. E ele não concorda como os processos de violação de direitos autorais, para ele música pode ser vista como matemática. E se você lembrar que há apenas 8 notas musicais, Damien teve a brilhante ideia de fazer um algoritmo que fizesse todas as combinações e colocou no domínio público. Segundo ele, isto pode ajudar naqueles casos em que alguém é processado apenas porque usou uma combinação usada por outro, e a segunda pessoa nem sabia. Veja o faq em http://allthemusic.info/ para entender melhor.

Não sou um advogado, nem estou defendendo a pirataria, o que me chamou a atenção foi a sacada de notar que há um espaço finito de possibilidades. Acho que há um fascinio em poder dizer ‘aqui está tudo sobre o tema X’, pessoalmente foi o que me atraiu no mestrado. Não vou ser arrogante de dizer que sei tudo sobre Design Thinking mas eu abordei meus estudos com este objetivo. E agora sei uma ou duas coisas a respeito …

Outro tema: Pense no design de uma página HTML ou SPA, quantos modos diferentes há de fazê-la? Usamos CSS para controlar o que será exibido. As cores são finitas, vão de #000000 até #FFFFFF; as bordas são top-bottom-left-right; e por aí vai. Adam Wathan notou isto e desenvolveu o TailwindCSS. Com o TailWind, você escreve seu CSS sem sair da sua pagina HTML. Veja a diferença, antes, se eu queria que meu texto fosse azul e negrito, eu faria isto:

style.css

 .info{
        color: blue;
        font-weight: bold;
    }

index.html

<p class="info">
    Lorem Ipsum
</p>

E voilà, texto azul e negrito. O TailWindCSS permite que você escreva diretamente e ele tem uma biblioteca com centenas e centenas de possibilidades. Assim que você usa no seu html ele gera o CSS automaticamente. Este é um detalhe, uma aplicativo roda no seu terminal e varre as suas páginas para saber o que gerar:

index.html

<p class="text-blue font-bold">
    Lorem Ipsum
</p>

ou texto bem grande, negrito, sublinhado, azul-celeste e centralizado na página:

<p class="text-3xl font-bold underline text-sky-400 text-center">
    Lorem Ipsum
</p>

UnoCSS leva a ideia adiante e elimina completamente o arquivo css. No UnoCSS há um script que analisa as suas páginas em runtime e gera as classes para você. E nāo é necessário um aplicativo rodando em background. Mágico! Note que o modo de escrever é exatamente igual ao TailWindCSS.

index.html

<p class="text-blue font-bold">
    Lorem Ipsum
</p>

Tenho usado muito UnoCSS. Mas tenho minhas críticas, o grande número de classes pode tornar o código HTML verboso, e é um fato, seu HTML fica difícil de entender. E o CSS gerado pelo TailWindCSS é legível apenas pelos desenvolvedores do … TailWind 😀.

Além disso, a dependência do framework em classes utilitárias pode levar a uma falta de consistência no design em todo o site, já que diferentes desenvolvedores podem usar classes diferentes para alcançar efeitos semelhantes. E uma vez que não há um arquivo CSS mantido pelo time, a necessidade de documentar as escolhas de estilo é essential.

Ainda assim, a praticidade parece para mim mostrar que frameworks assim serão cada vez mais populares.