Executando verificação de segurança...
1

CSS Puro vs Tailwind vs Bootstrap

Início

Olá Devs! Bom sempre tive a dúvida do que seria melhor para ser usado inicialmente hoje em dia, imagino que a utilidade desses Frameworks de CSS seja específico pra o tipo de site que o user deva estar desenvolvendo, não sei se é realmente isso, mas queria perguntar a vocês o que vocês acham do uso deles para uma pessoa que está iniciando no Front-End.

Código Limpo vs Código Sujo

Após pesquisar um pouco sobre esses Frameworks vi que facilita bastante a questão da escrita do CSS puro, mas deixa o HTML bem sujo, na opinião de vocês ele facilita ou seria melhor usar o CSS puro mesmo ?

Diferença entre eles

Por último queria perguntar a vocês, qual a diferença entre o Tailwind e o Bootstrap ?
Se possível citar alguns pontos negativos, pontos positivos entre um e outro.

Fiquem à vontade para indicar outro Framework de CSS que vocês já tenham usado :D

Carregando publicação patrocinada...
1

Tailwind e o Bootstrap : ambos são frameworks CSS.

Mas o que muda o Tailwind é mais voltado para quem usa algum framework de JS
como react por exemplo. Por isso a mistura de CSS + html + js
Já Bootstrap é mais separado. Vc usa as tags no HTML e usa um JS como link normal!

Tanto faz como você vai usar, CSS puro ou não!

Framework css mais puro que conheço: https://purecss.io/

Uma lista de muito frameworks css
https://github.com/troxler/awesome-css-frameworks

1

Bootstrap é um UI KIT, assim como o Material 3, Orbit, etc conceitualmente não é comparável com o TailwindCSS (diferente do TailwindUI).
O que define um UI KIT é um design system definido com tipografia, breakpoints, regras de uso dos componentes, etc.

Sobre sua pergunta, depende.
É um protótipo ou dashboard? Se for, acredito que o Bootstrap é a melhor opção.

É um web app mais complexo com identidade visual bem definida? Nesse caso usar o TailwindCSS pode ser uma boa.

É uma landing page apenas? O CSS puro pode ser a melhor opção para não complicar demais.

1

Limitações Comparativas entre CSS, Bootstrap e TailwindCSS

Todas as três opções são excelentes, mas elas apresentam suas limitações. Eu vou apresentar e tentar resumir as principais limitações e também o que na minha opinião é o melhor uso de cada caso.

CSS puro:

Prós:

  • Alta customização:

Excelente para projetos pequenos que requerem um toque bem personalizado e cheio de pequenos detalhes.

Contras:

  • Tempo de desenvolvimento:

Por ser muito elevado o nível de customização, infelizmente tende a se tornar cada vez mais complexo o código css, para isso é muito comum o controle do código css em arquivos separados, e ainda assim caso boas práticas não sejam utilizadas as florestas de arquivos também tendem a se tornar bem confusas aumentando ainda mais o tempo de desenvolvimento.

Uso:

Projetos Pequenos, ou pequenos ajustes com alta necessidade de customização

Bootstrap:

Prós:

  • Rápido e simples:

O bootstrap é de fácil instalação e de fácil implementação, a velocidade com que você estrutura com bootstrap é muito maior comparada com o css puro. Se você precisa desenvolver um projeto pequeno com pouca customização, como um MVP (Produto Mínimo Viável), ou mesmo um protótipo, o Bootstrap é o cara, ele vai deixar as coisas com visual agradável com velocidade, e você poderá focar em outras funcionalidades.

Contras:

  • Baixo nível de customização:

Apesar de ser muito rápido de instalar e usar, o bootstrap é bem engessado, e do ponto de vista do Designer manter somente o bootstrap pode causar um desconforto de mesmisse, já que os espaçamentos, as cores, as estruturações, são pré definidas.

Uso:

MVPs, Protótipos, com baixa necessidade de customização.

TailwindCSS:

Prós:

  • Rápida Implementação e alta customização

O tailwind é um framework que pega o melhor do Bootstrap e expande isso, aumentando o nível de customização, do ponto de vista do designer é maravilhoso, ele vai entregar resultados personalizados em um pouco espaço de tempo. A possibilidade de escolher a cor de um elemento, ou espacamento e tamanho, direto no HTML é extremamente libertador. É muito indicado em projetos grandes, e que precisam de entregas rápidas e personalizadas. Se o MVP está definido o melhor é ir com o TailwindCSS.

Contras:

  • Implementação complexa:

Não é muito intuitiva a instalação do Tailwind então para quem está começando pode perder algum tempo configurando o ambiente até conseguir trabalhar.

  • O problema do codigo sujo:

Na verdade, isso não é um problema da ferramenta, o mesmo pode acontecer com o CSS puro ou do Bootstrap, mas o desenvolvedor utilizando boas práticas consegue manter o HTML limpo ao mesmo tempo que bem estruturado, contudo o tailwind de fato por ter mais opções de customização acaba por se tornar mais sujo que os demais.

  • Nem tudo são flores:

Nem toda customização será possível com o Tailwind, às vezes é necessário recorrer ao velho e bom CSS para resolver alguns probleminhas.

Uso:

Projetos Grandes com alta necessidade de customização.

Considerações finais:

Nada impede de usar CSS puro Junto com os Frameworks!

Sabendo que o Bootstrap tem pouco espaço para customização e o Tailwind também tem seus limites, ou seja, nem tudo ele consegue fazer, nesses casos, o conhecimento em CSS é mais do que necessário, para fazer um bom trabalho. Assim, recorrentemente alguns detalhes eu preciso fazer utilizando o velho e bom CSS, um pouco mais lento, mas poderoso, e com a ajuda do Framework, muito menos código para dar manutenção.

A questão do código sujo no TailwindCSS

Na verdade, isso é facilmente mitigado por recursos que o Tailwind oferece, como por exemplo, componentização de classes:

Temos esse trecho de código:

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn-blue {
  @apply bg-blue-500 text-white rounded-md hover:bg-blue-600 transition ease-in-out delay-150;
}

E o HTML fica assim:

    <button class="btn-blue">...</button>

E quanto maior for ficando seu Tailwind, em vez de colocar no HTML, coloque no componente.

Impossibilidade de uso de mais de uma UI Lib ou Framework

Outro ponto que deve ser levado em conta é que não se pode usar o Tailwind com Bootstrap por exemplo, pois eles costumam compartilhar as mesmas classes. Por isso, se o projeto tem tailwind, não inventa de trazer bootstrap porque é mais fácil, ou vice-versa, trazer tailwind porque você quer mais customização. Um vai atrapalhar o outro. Se o projeto já passou do período de MVP e prototipação, é recomendado começar o front do zero com TailwindCSS, se você não quer este "retrabalho", comece direto com ele.

1