Em defesa dos frameworks

Entendo sua dor, e não é questão de inteligência. Mas quero falar em defesa dos Frameworks.

Frameworks são ferramentas criadas para solucionar dores que alguém já teve no passado. Escrever CSS manualmente é poderoso e flexível, mas tem alguns problemas relacionados à produtividade ou a dificuldade que algumas pessoas tem para "deixar a interface bonita".

Por vários anos fui defensor de evitar ferramentas externas, mas com o passar do tempo fui me rendendo e vou te dizer alguns pontos que me fizeram mudar de ideia:

Dificuldade para excluir código

Para mim, esse é um dos problemas mais críticos, principalmente em bases de código grande. Quando você precisa excluir alguma parte do código, seja qual for o motivo, inevitavelmente vai acabar deixando algum seletor do CSS.

Outros membros da equipe podem ficar com medo de excluir seletores por não saber se estão sendo utilizados em outra parte do código e a bagunça tende a se acumular.

Inconsistência de navegadores

Ter que adicionar prefixos como webkit ou moz para resolver pequenas diferenças não só é chato como as vezes pode consumir mais tempo do que o esperado.

Muitos frameworks possuem uma camada de reset. (Obs.: Você também pode utilizar ferramentas como PostCSS, ou copiar uma folha de estilos reset padrão. Mas frameworks podem agilizar isso para você)

Especificidade de seletores

Se você tentar deixar o HTML o mais "limpo" possível, vai criar diversos seletores de elemento (p, li, section, etc). Dessa forma vai acabar com seletores do tipo #contact-section ul > li, o que fica uma bagunça na especificidade. (Obs.: Hoje em dia temos :where(), mas ainda pode-se causar problemas se descuidar)

Frameworks normalmente possuem seletores exclusivos de class ou attribute, o que torna sua especificidade muito mais fácil de entender e debugar.

Repetição

Quando você é o autor do CSS e não quer "sujar" o HTML com muitas classes, vai acabar repetindo muitas vezes os mesmos estilos. Por exemplo:

.button {
   padding-inline: 1.5rem;
   background-color: var(--primary-color);
   ...
}

.nav-link {
  padding-inline: 1.5rem;
  ...
}

.featured-section {
  background-color: var(--primary-color);
  ...
}

Até mesmo em landing pages pequenas você acaba se repetindo várias e várias vezes. Mesmo que isso não impacte muito no carregamento da página para seu usuário, pequenas mudanças podem ser chatas de implantar, mesmo recorrendo às custom properties (CSS var).

Frameworks que possuem classes utilitárias não tem esse problema. Você polui o HTML, mas seus estilos ficam extremamente fáceis de atualizar, pois são centralizados.

Estética

Especificamente para mim não é um problema. Sou designer de formação e consigo "deixar o site bonito" sozinho, inclusive prefiro customizar todo o estilo. Mas essa não é uma realidade para muitos desenvolvedores.

Vários frameworks (Bootstrap, Daisy-UI, Bulma, Materialize, etc.) são formados por componentes pré-estilizados. Isso pode ser um facilitador absurdo para quem tem dificuldades para criar os estilos sozinho. Graças à ferramentas como essas algumas pessoas puderam finalizar seu projeto sem deixá-lo horrível.

Não existe fórmula mágica. Mas não devemos fechar os olhos para ferramentas existentes no mercado. Elas não existem por acaso e a atitude mais inteligente é se manter informado e tomar decisões acertivas para o projeto.

P.S.: Hoje em dia utilizo Tailwind CSS em praticamente todos os projetos. Mas já vi benefício em vários outros.

eu também já me senti incomodado com isso quando comecei a trabalhar com esses frameworks, achava o bootstrap muito desnecessariamente redundante com essas classes e por isso preferia trabalhar com o Foundation que, pelo menos na versão da época, não tinha tanta necessidade de colocar tantas classes nos elementos, era só colocar as tags da tabela e a tabela já aparecia bonitona, os inputs dos formulários também, eu achava muito mais prático. mas depois de um tempo acabei sendo "obrigado" a usar bootstrap por ser mais usado no mercado e já faz muito tempo que não uso o Foundation, nem lembro mais como usar

Você escreve muita coisa pq as funções são modulares, mas sempre tem um jeito de agregá-los e limpar seu html. Sass usa o @extend e o framework TailwindCSS usa o @apply pra isso.

Mas se o CSS fosse atribuído diretamente baseado na tag, se você quisesse um botão sem estilização, como fariamos?

Concordo que algumas dessas características podem frustrar no uso ou mesmo complicar a legibilidade.

Quando iniciei meu aprendizado, fiz questão de me embasar apenas em documentações e exemplos da tríplice (HTML, CSS e JavaScript), e após muitos projetos pessoais, testes com frameworks, hoje tenho como premissa que lido muito bem sem depender. O framework ajuda, mas nem sempre é a melhor opção.

Eu acredito que ter muitas classes no html dificulta sim a legibilidade, assim como ter um arquivo com muitas linhas ou com muitos comentários, etc.
A questão fundamental que se deve pensar é no que você está disposto a "perder". Toda escolha é uma renúncia e na programação isso é muito verdade.
Um Bootstrap da vida agiliza a prototipação do projeto, mas deixa o código feio haha. Uma outra vantagem de frameworks é a consistência de estilos, tudo funciona bem em conjunto e de quebra desperta certa familiaridade de uso para a pessoa usuária do produto.
Enfim: não existe solução perfeita, infelizmente.

cara... te falar que eu tbm acho isso um abuso.. fora que por vezes, no mesmo framework, mas em versões diferentes, as nomenclaturas mudam.

o que pode resolver boa parte desses problemas que tu listou é o esquema de extender um estilo. estou meio por fora, nao sei se o css nativo já tem isso, mas com os pré-processadores tem como. aí vc faria como na programação normal, como se estivesse extendendo uma classe do yarn, maven, composer...

o que tu acha? Será que resolveria nosso drama?

Frameworks CSS tem seus usos, do contrario não existiriam.

Porém, se alguém aí já tentou alterar uma pagina complexa feita por outra pessoa com tailwind/bootstrap, já presenciou o inferno.

Em 10 anos de carreira um dos tipos de trabalhos que mais fui contratado pra fazer foi 'disbootstrepizar' apps.

Se aprofunde em CSS e vá ser feliz.

Dicas de ouro:

• Aprenda a trabalhar com Dev Tools.
• Use um bundler (ex.: WebPack)
• Aprenda a trabalhar com componentes isolados.

tenho essa dor tambem, tenho um projeto em laravel consigo entender tudo o lado servidor ok, simplesmente travei porque nao sei escrever telas com html, entendo os conceitos sem escrever as tags, mas nao consigo entender o maldito posicionamento, sai tudo errado. ja usei bootstrap e nao sai legal. acho que to velho para isso nao tenho mais paciencia. a vontade que tenho e voltar a desenvolver em c# e colocar um aplicação desktop na nuvem ao estilo webapp ou tsplus.
até pensei em usar net maui porque rodaria no tablet, pc. isso acaba comigo. sem que alguem vai dizer que é falta de competencia ou inteligencia que tem cara fera que faze e tal que é full-stack . pode ser um limitação minha mesmo. mas não consigo progredir.