Como desenvolver boas aplicações web sem escrever CSS?
Acredite, é possível desenvolver boas interfaces web totalmente personalizadas rapidamente e sem precisar escrever sequer uma única linha de CSS.
Publicado em
Atualizado em
Palavras-chave: CSS, Tailwind, web
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:
- Bootstrap (github:twbs/bootstrap)
- Semantic UI (github:Semantic-Org/Semantic-UI)
- Bulma (github:jgthms/bulma)
- Materialize (github:Dogfalo/materialize)
- 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.