Bootstrap vs Codigo Semântico/Design Customizado

[philipealmeida]

Um bom dia a todos

Dúvida referente a Bootstrap e ao seu uso.
Objetivo de esclarecer alguns pontos referente ao assunto e se mais alguém ja teve ou tem a mesma dúvida na questão da utilização do Framework Bootstrap.

Atualmente não uso Bootstrap e nas empresas e projetos que trabalhei não utilizam nem para suas landpages.

Porem numa empresa que estou realizando um projeto um dos desenvolvedores disse que sem bootstrap não é possível o trabalho em equipe, e o codigo fica mais padrões de projeto, o que é TOTALMENTE errado, sendo assim empresas como Abril, SBT enfim, empresas que atuei que nao usam seus sites como este framework teria, ao ponto de vista dele, sérios problemas com a manutenção do código, o que não é verdade; pois mais de 50 desenvolvedores no mesmo projeto e não tem este tipo de problema e nem aconselham o uso de bootstrap, pela dependência do uso de suas classes, com um design customizado, acaba que as classes e estilo predefinidas do bootstrap mais atrapalham do que ajudam.

Vendo projetos de referências do mundo front-end internacional e nacional, como o próprio @lfeh não utilizam bootstrap na maioria (ou 99.99%) do seus projetos.

Gostaria da opinião de quem usa e principalmente de quem não usa explicando como e por que usar ou não o Bootstrap, visando um projeto com código semântico e sob medida com Design customizado.

Philipe Almeida
Desenvolvedor Front-End
https://about.me/philipalmeida

[barbier]

Eu uso o Bootstrap porque caiu em uso comum.
Não é difícil se entender com a documentação, não que seja boa, e muita gente usa, logo é tranquilo para várias pessoas se entenderem com o código, ou pelo menos as partes que usam ele.
Eu já tentei usar o Foundation, mas ainda não me entendi 100% com ele, preciso criar um projeto com ele para ter experiência para comentar.
No meu último projeto, usei o PureCSS e não recomendo.
É levíssimo, 4kb, já entrega componentes como grid, tabelas e forms, mas muita coisa fica "esquisita" depois de passar o CSSO, o grid não tem gutter....

Não é que não dê pra não ter trabalho em equipe se a equipe não usar um framework (ou lib?) desses, mas certamente ajuda. Caso a equipe não use, é bom criar o próprio conjunto e ter um style guide bastante consistente para que ninguém se perca.

[thiamsantos]

Eu concordo com @barbier, para equipes maiores é muito importante ter uma style guide com os padrões da empresa.

Acredito que se for fazer tudo com o Bootstrap ou semelhantes, o profissional de front-end se torna dispensável. Não sei, é a minha visão.

Talvez alguém com mais experiência possa dizer com mais propriedade.

[barbier]

@thiamsantos, meua migo, se você já tivesse visto as coisas que eu vi back-ends fazerem com bootstrap.....

[bernardodiasc]

Acho esse exagero sobre a biblioteca do Bootstrap um equívoco. Existem razões para se utilizar o Bootstrap e não deve ser algo automaticamente adotado. Code base ruim vai ser ruim com ou sem framework, sabendo o que o torna bom, vai ser bom com ou sem também (as vezes é mais fácil fazer code base bom sem frameworks...).

O que o Bootstrap oferece: padrões de arquitetura, padrões de escrita, padrões de display, documentação, comunidade, código pronto reutilizável, etc. Qualquer projeto pode ter tudo isso, requer mais tempo pra montar boas estruturas de frontend para projetos específicos, documentação entao nem se fala, mas é importante entender que Bootstrap é 1 das milhares de opções em termos de solução, bom entender que essa lib em particular existe para oferecer soluções rápidas para modelos específicos, funcionalidades específicas, design específico, tudo com certa capacidade de expansão e personalização, mas ainda assim completamente genéricos.

Antes de tudo, o projeto que voce vai usar foi criado com Bootstrap em mente? O designer sabe o que é um "content pattern" (que usa HTML), conhece as limitações que o framework possui em seus modelos? A arquitetura do CSS que a equipe usa funciona com o que o Bootstrap usa? Enfim, o projeto é feito baseado em Bootstrap? Se sim, vai em frente, tem muitas técnicas legais para usar esse framework num projeto inteiramente baseado nele. Lembre-se de que o framework vira a base do seu projeto.

Se o projeto é feito sem o framework em mente, ainda assim é possível que encontre diversos componentes e padrões compatíveis, afinal o framework é direcionado para coisas genéricas de websites, então nada mais esperado do que algumas compatibilidades. Mas veja direito se tudo que há no framework é o que voce quer na base do seu projeto, adotando-o voce automaticamente diz "sim" para todas as coisas que o framework traz, e é muita coisa.

Empresas hoje em dia querem montar nas costas do open source, afinal fazendo a soma de homens/hora que um Bootstrap possui, é tremenda. Isso gera uma confusão sobre a disponibilidade pela qualidade. Considerando que qualidade tem mais a ver com como a ferramenta é usada e não como ela é feita em si. Imagina um ótimo alicate que é usado pra prender roupa no varal, usar a ferramenta corretamente faz diferença... Quando cliente pede pra mim ganhar tempo usando isso ou aquilo, não concordo, não acho justo e esse tipo de estratégia não passa no meu controle de qualidade, me recuso a seguir em frente por qualquer razão errônea (ou pela falta delas).

Minha sugestão é: se vai adotar o framework, saiba exatamente as razões, os pontos fortes e os fracos tambem. Saiba que seu time vai adotar aqueles padrões e que todo mundo automaticamente concorda com como o framework é desenvolvido. Não vejo problema em adotá-lo se tudo isso foi aceito. Nos meus casos, uso apenas para prototipação uma vez que vários padrões de display são úteis para para protótipos, mas sempre removo o framework na hora de fazer o produto final.

O ponto forte de um framework, qualquer que seja, é sem dúvida a organização. Código reutilizável bem documentado... não é tecnologia de foguete, mas consome tempo. Se é um projeto de 50 pessoas, com certeza vale a pena ter o próprio framework (e não precisa ser automaticamente um concorrente do Bootstrap, pode ser ad hoc exclusivo para ser usado internamente, com diversas coisas totalmente personalizadas).

Nota: a arquitetura do Twitter Bootstrap não é tão boa assim, a coisa começa a ficar feia em projetos mais duradouros, difícil explicar todos os drawbacks, vale a experiência pra saber. Quando vejo pessoas adotando ferozmente o framework como solução de todos os problemas de interface, fica bem visível o quanto de informação sobre o que o framework faz que aquela pessoa não tem.

[felipefialho]

Usei bastante o Booststrap em meados de 2013, e inclusive tenho um pull-request aceito por eles, que foi motivo de muito orgulho.

Pra mim o Boostrap foi fundamental na web moderna, nos mostrou o quão útil e escalável um projeto bem documentado e bem desenvolvido pode ser.

Mas vocês precisam entender uma coisa, o Boostrap foi uma solução do TWITTER, um framework criado para o eles e transformado em projeto open-source depois.

Eu não usaria mais em projetos reais, salvo alguns plugins e mixins que você pode usar separadamente, por exemplo, até hoje utilizo o Carousel deles, que pra mim é o melhor do mercado, extremamente leve e customizável.

Existe inclusive uma versão em JavaScript vanilla dos plugins deles.

Já para prototipagem ou mesmo para criar um CMS rápido, o Boostrap é MUITO bom, trás uma solução rápida e simples. Fazendo com que você foque no mais importante, ou seja, sua aplicação em si.

[santosluiz]

Eu creio que não exista uma regra geral para o uso ou desuso. Tudo vai depender das exigências do projeto, desde a criação do layout pelo designer, tempo para produção, manutenção, escalabilidade e etc.

A questão é que o Bootstrap (assim como qualquer outro framework) agiliza bastante o processo de desenvolvimento. Cabe a você identficar a necessidade de utilizar ou não. Além disso, não necessariamente você precisa utilizar todas as ferramentas dele. Você tem a liberdade de personalizar o conteúdo dele . Nos meus projetos eu utilizo apenas o grid dele.

Enfim, é necessário analisar o projeto como um todo e se a equipe está de acordo com o uso dele (ou de outro framework), sua personalização ou a criação de m próprio style guide.

[lcquadros]

O Bootstrap é um fim onde muita gente (principalmente em backend) não enxerga os meios.

Hoje, fazendo uma conta de padeiro, uns 80% dos trabalhos que eu participo escuto nas reuniões de requisitos "...e tem que ser em Bootstrap" seja pelo visual final (raramente imaginam que o tema pode ser adaptado livremente) ou pelo fato de estar tudo pronto. Aí acontecem monstrinhos como class="col-xs-6 col-sm-3 clearfix no-border error etc..."

Quando o Bootstrap foi lançado eu achei que seria algo didático, que ensinaria coisas como modularização, reaproveitamento de código, etc. Pelo menos era assim com o Preboot, de onde ele nasceu: uma biblioteca de mixins para Less.

Hoje, assim como em backend (PHP) há um predomínio por microframeworks e dependências PSR desacopladas eu acredito que os "frameworks" CSS devem desacoplar seus elementos (grid, ritmo tipográfico, formulários, etc) ao nível de módulos que possam ser organizados de acordo com o projeto. Porque na minha opinião, a medida que nos aperfeiçoamos nos trabalhos compreendemos que usamos 20% ou até menos de um ou outro framework, um style guide é uma base sólida e declarações personalizadas com a devida documentação criam projetos escaláveis.

[Lucasktrindade]

@lcquadros o grande lance é que o pessoal pega já o CSS minificado do Bootstrap e cria um style dando override nas classes, mas basicamente você baixando o projeto e pegar o código com pré-processador, você consegue pegar os módulos que precisar e processar apenas o que vai usar.

Nunca usei bootstrap em um projeto real, aqui no trabalho nós temos nossa própria solução pois quisemos fazer algo de acordo com o padrão da instituição, assim como o @santosluiz disse acima, a gente analisou a nossa necessidade, e a gente até usa algumas coisas disponíveis na web. E vamos seguir uma metodologia CSS (SMACSS, BEM ou ITCSS) para ter um style-guide que possamos seguir e qualquer pessoa que vier de fora conseguir entender.

[woliveiras]

Pro lance de usar pré processador, eu fiz até um post quando usava o BS falando sobre o assunto:

https://woliveiras.com.br/posts/twitter-bootstrap-bootstrap-do-jeito-certo/

Mas na época foi com o Less. :)