Como desenvolver boas aplicações web sem escrever CSS?

Sabe-se que o CSS é o grande responsável pelo estilo visual de aplicações web e que ele ganhou muito mais importância nos últimos anos, com o destaque de conceitos como composição de interfaces, usabilidade e experiência do usuário (UI/UX).

Mas também é fato que até hoje o CSS é estranho para muitos desenvolvedores, sendo um "calcanhar de Aquiles" para quem sabe HTML, compreende o JavaScript e até domina algum framework, mas tem dificuldades em lidar com o CSS.

E se eu disser que é possível desenvolver boas interfaces web totalmente personalizadas rapidamente e sem precisar escrever sequer uma única linha de CSS?

Parece interessante? Então siga lendo e descubra como fazer isso.

Como a maioria geralmente faz?

Os famosos "frameworks CSS" são geralmente a primeira opção na maioria dos casos.

Uma rápida pesquisa na web e clicks em alguns links listam sempre os mesmos nomes. Entre os mais conhecidos (e também mais "estrelados" no Github), sem dúvida estão:

1. Bootstrap (github:twbs/bootstrap)
2. Semantic UI (github:Semantic-Org/Semantic-UI)
3. Bulma (github:jgthms/bulma)
4. Materialize (github:Dogfalo/materialize)
5. Foundation (github:foundation/foundation-sites)

Esses (e outros) frameworks CSS são grandes pacotes de recursos reutilizáveis com foco em uma grande e pré estabelecida base de estilos, estruturas e componentes comuns para a web. Com eles, é possível fazer aplicações web rapidamente sem escrever CSS (ou quase), apenas reutilizando seus estilos e componentes já prontos.

Porém, a enorme desvantagem é que fazendo assim você teria todas as aplicações web com a "mesma cara" e ficaria evidente que foram todas feitas com os mesmos recursos, sem qualquer personalização.

Para evitar isso, é necessário adicionar temas, escrever e/ou sobrescrever CSS personalizado para acrescentar identidade à aplicação. Portanto, apesar de tudo o que esses pacotes oferecem, esta abordagem não te livra de escrever CSS. Ou, na verdade, pior que isso: sobrescrever, gerando código duplicado e redundante.

Eles podem oferecer alternativas de personalização que envolvem incluir o código-fonte deles no processo de build da sua aplicação para alterá-los, mas isso também não te livra de fazer o que acabei de citar.

Além disso, outra grande desvantagem nesses casos é que você inclui uma biblioteca inteira de estilos CSS na sua aplicação que muito provavelmente você não usará nem a metade dos estilos nela definidos. Isso sem contar o tema e as personalizações!

Isso aumenta significativamente a quantidade de código CSS desnecessário na sua aplicação, podendo comprometer a performance, que todos sabemos ser muito importante para aplicações web, como você pode ler neste artigo: Como otimizar a performance de aplicações web frontend.

O que seria ideal?

O ideal seria incluir na sua aplicação apenas e exclusivamente os estilos que ela realmente precisa e vai usar no HTML final de fato.

Então isso quer dizer que precisamos voltar ao tempo em que não existiam frameworks CSS e escrever cada linha do CSS de uma aplicação do absoluto zero?

Pode ser uma alternativa, mas talvez não a melhor do ponto de vista de produtividade, padronização e boas práticas. Além disso, seria totalmente o oposto do que o título deste artigo sugere.

Por isso, o que proponho aqui é o oposto disso e também da alternativa anterior, e ainda uma fusão entre as duas coisas.

Como assim? Confuso?

Sim, é possível usar um framework CSS moderno de alto nível para reutilizar estilos prontos e úteis apenas usando classes, mas que são capazes de criar qualquer estilo de aplicação, altamente personalizada, sem a necessidade de adicionar temas ou sobrescrever estilos, e ainda resultar em um CSS final com apenas e exclusivamente os estilos que sua aplicação realmente precisa. Tudo isso sem escrever sequer uma única linha de CSS!

Parece mágico (e é um pouco), mas estou falando do framework tailwindcss (link no final do artigo).

É tudo isso mesmo?

Sim, e talvez até mais!

tailwindcss introduz o conceito de framework CSS orientado à "utilidade", trazendo para o CSS vários conceitos do desenvolvimento de software, como por exemplo: composição.

Isso quer dizer que ele é uma enorme coleção de classes CSS "utilitárias", com enormes variações dos mesmos estilos para praticamente todas as regras CSS possíveis.

Uau! Mas se é assim deve ser uma biblioteca CSS gigantesca! 😮

Bom, se você ainda pensa do "modo Bootstrap", ou seja, incluir um arquivo CSS da biblioteca no projeto... Sim, será uma biblioteca realmente gigante!

A documentação até cita que é possível simplesmente incluir o CSS completo compilado e hospedado na CDN:

<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

Mas esta opção é uma das últimas citadas na documentação exatamente porque o framework não foi desenvolvido para ser usado assim. Este arquivo tem quase 3MB (72KB em compressão extrema!) 😮. Esta seria apenas uma opção para testá-lo ou para criar protótipos rápidos, mas nunca para uso em produção.

tailwindcss deve ser integrado ao processo de build da sua aplicação. Portanto é óbvio que estamos falando de aplicações web desenvolvidas com práticas modernas e avançadas, com uso de frameworks e/ou ferramentas de build e otimização. E nesse processo, apenas as classes e os estilos necessários serão compilados no CSS final.

Na documentação oficial há guias para vários frameworks populares e também instruções de como integrá-lo em soluções mais personalizadas. Fazendo isso, o CSS final de uma aplicação totalmente personalizada com tailwindcss ficará muito menor e mais leve do que o uso de qualquer outro framework CSS mais famoso.

Mas como isso funciona? Não precisa escrever nenhum CSS mesmo?

É possível compor qualquer estilo para qualquer tipo de aplicação web totalmente personalizada sem escrever sequer uma única linha de CSS! 😮

Eu sei, é difícil acreditar, mas é verdade.

Basta olhar o exemplo na imagem de destaque desta página, é o mesmo exemplo interativo da página inicial do tailwindcss.

Você pode compor os estilos que quiser para os elementos HTML simplesmente declarando neles as classes utilitárias do framework. E isso inclui poder usar paletas inteiras de muitas cores possíveis, posicionamento, tamanho, responsividade, flexbox, grid, background, gradient, etc... Praticamente tudo o que se possa pensar em fazer com CSS.

Simples assim! O processo de build/otimização se encarregará de compilar o CSS final com apenas o que for realmente necessário para atender às classes usadas no HTML.

Eu já testei isso fazendo 3 sites diferentes. Inclusive este meu site pequeno e minimalista, com alternância de temas claro e escuro, foi feito sem escrever nenhum CSS, apenas usando os recursos do tailwindcss.

Então ninguém precisa mais aprender CSS, certo?

Errado! Para fazer bom uso do "cinto de utilidades" tailwindcss é preciso conhecer bem os recursos que ele oferece e como ele entrega tudo isso.

O framework é bem documentado e bastante detalhado quanto a isso. Sua documentação no site oficial é a melhor fonte de informação a respeito.

Porém, todas as classes no framework fazem referência direta ou indireta às respectivas regras CSS que implementam ou a conceitos comuns de interface. Ou seja, é preciso conhecer bem o CSS ou você não entenderá o que as classes utilitárias do framework fazem e não saberá usá-las com habilidade.

Eu prometi desenvolver boas aplicações web sem escrever CSS, mas não sem conhecê-lo. 😉

Pode ser que um desenvolvedor iniciante ou pouco experiente em CSS consiga usar tailwindcss até com certa "facilidade", mas é bem mais provável que será uma ferramenta muito mais útil na mão de um dev mais experiente e com maior domínio de CSS.

Independente disso, na minha humilde opinião, concordando com a do criador do framework, os padrões para CSS que até hoje ainda eram considerados "boas práticas" já estão ultrapassados e o tailwindcss está superando essa obsolência e elevando o CSS no desenvolvimento web para um novo nível.

Gostou? Para saber mais, acesse o site oficial do framework:

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.