Meu antigo colega de trabalho Matt Copeland escreveu recentemente um excelente artigo chamado Bootstrap Bankruptcy , no qual ele compara o uso do Bootstrap em um site com a obtenção de uma hipoteca:
Quando se trata de interfaces personalizadas, o Bootstrap não é uma caixa de tijolos, painéis,
paredes e portas com a qual você pode construir o que quiser. Bootstrap é mais
como uma hipoteca. As hipotecas podem ser coisas boas. Você não teve tempo de
economizar e comprar sua casa em dinheiro. Você precisava de uma hipoteca para ter um teto sobre
sua cabeça. Isso é semelhante a usar bootstrap para obter alguma IU no lugar quando você
não tem os recursos para construir a IU do zero.
A forma como o Bootstrap é geralmente usado
Matt aqui está descrevendo o que eu acho que a maioria dos usuários experimenta em algum ponto com o Bootstrap: o que a princípio parecia um grande conjunto de blocos de construção, eventualmente começa a se transformar em uma montanha de dívidas técnicas. Seu HTML está repleto de estruturas profundamente aninhadas com atributos específicos do Bootstrap como "row"e "col-lg-10". Não é semântica, e é difícil imaginar puxando Bootstrap para fora . Nesse caso comum, eu concordo com Matt, e acho que pode-se argumentar que uma falha séria na estrutura é o quão alegremente ela parece facilitar esse acoplamento estreito e marcação não semântica.
Uma grande parte do problema, é claro, é que o Bootstrap usa exatamente esse tipo de marcação em todos os exemplos em sua documentação. Mas eu não culpo os desenvolvedores do Bootstrap por isso. Em minha opinião, eles otimizaram para usabilidade imediata – o tipo onde você pode simplesmente copiar e colar algum código e funciona imediatamente – e isso é uma grande parte do sucesso do framework. Além disso, embora o framework use LESS internamente para organização e reutilização de regras de estilo, ele é distribuído principalmente como CSS, que não requer configuração adicional e pode simplesmente ser colocado em um site para instalação de baixo atrito.
Esses atalhos são uma parte significativa do motivo pelo qual o Bootstrap atrai tantas críticas de alguns círculos (você pode não estar ciente disso, mas está lá se você quiser ir procurá-lo); paradoxalmente, eles também são uma grande parte do que o tornou tão popular. Mas essa é outra discussão. Para o leite e mel prometidos.
Uma maneira melhor de usar o Bootstrap
Fundamentalmente, acho que é valioso conceituar Bootstrap como duas coisas distintas:
- Uma coleção de regras de estilo cuidadosamente elaboradas (pense: as propriedades CSS)
- Um vocabulário para se referir a essas regras (pense: os nomes reais das classes )
O primeiro é realmente um conjunto de blocos de construção. Basta olhar o site do Bootstrap e você pode ver tudo lá: tipografia, espaçamento, esquema de cores, layout básico. Esqueça os nomes das classes e atributos especiais por um momento e considere apenas o que você vê . Todas essas peças são reutilizáveis. O truque é como você os consome.
O vocabulário do Bootstrap é onde podemos ter problemas. Usar e assim por diante diretamente em sua marcação é uma maneira segura de acabar preso por algum bloqueio sério do Bootstrap.<div class="container">
Para aproveitar os benefícios dos estilos úteis do Bootstrap, sem incorrer em todo o débito de seu vocabulário, use a marcação semântica em suas páginas e os estilos do Bootstrap calçadeira por meio de uma linguagem de folha de estilo de nível superior, como SASS .
Aqui está o que quero dizer. Digamos que você tenha um layout HTML Bootstrap-y como este:
<body>
<div class="container">
<div class="page-header">
<h1>Company Title</h1>
<p class="lead">Slogan</p>
</div>
<div class="row">
<div class="col-lg-3">
<ul class="list-group">
<li class="list-group-item"><a href="/">Home</a></li>
<li class="list-group-item"><a href="/about">About</a></li>
<li class="list-group-item"><a href="/contact">Contact</a></li>
</ul>
</div>
<div class="col-lg-9">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet [...]</p>
</div>
</div>
</div>
</body>Mesmo para algo tão simples, já começamos um caminho bastante estreito. Vamos tentar recomeçar, mantendo a marcação semântica.
<body>
<header>
<h1>Company Title</h1>
<p>Slogan</p>
</header>
<main>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<article>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet [...]</p>
</article>
</main>
</body>Muito melhor. Agora não há nenhum vestígio de Bootstrap na própria marcação. (Observe que estou usando algumas tags específicas do HTML5, como <header>, <main>e <article>; se você visasse navegadores mais antigos, ainda poderia facilmente manter sua semântica de marcação usando <div>elementos com nomes de classe não Bootstrap significativos.)
Agora, usando o SASS, ainda podemos estilizar esta página usando as definições de estilo do @extendBootstrap -ing classes Bootstrap:
// I have no idea why Coderwall is putting a <a href="..."> in here.
@import "bootstrap";
body { @extend .container; }
body > header { @extend .page-header;
p { @extend .lead; }
}
body > main { @extend .row;
nav { @extend .col-lg-3;
ul { @extend .list-group;
li { @extend .list-group-item; }
}
}
article { @extend .col-lg-9; }
}Aqui está o resultado:
Vamos tentar outro exemplo: um formulário de login.
<form>
<div class="form-group">
<label for="email">E-mail</label>
<input type="text" name="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" />
</div>
<div class="checkbox">
<label for="remember">
<input type="checkbox" name="remember"> Remember me
</label>
</div>
<input type="submit" class="btn btn-primary" value="Log In" />
<a href="../" class="btn btn-warning">Back</a>
</form>Mais uma vez, os lotes de Bootstrap lá: , , do etc. Vamos tentar ser mais semântico novamente:<div class="form-group"><input class="btn btn-primary">
<form id="login-form">
<div class="email field">
<label for="email">E-mail</label>
<input type="text" name="email" />
</div>
<div class="password field">
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="remember field">
<label for="remember">
<input type="checkbox" name="remember"> Remember me
</label>
</div>
<div class="actions">
<input type="submit" value="Log In" />
<a href="../">Back</a>`
</div>
</form>E, novamente, vamos pegar emprestado do Bootstrap em nosso SASS:
#login-form {
.field { @extend .form-group;
input[type="text"],
input[type="password"] { @extend .form-control; }
&.remember { @extend .checkbox; }
}
.actions { @extend .form-group;
input[type="submit"] { @extend .btn, .btn-primary; }
a { @extend .btn, .btn-warning; }
}
}Como se parece?
Graduando-se no Bootstrap
Portanto, você pode ver que não precisa necessariamente sobrecarregar sua marcação com a terminologia do Bootstrap para acessar a seleção útil de estilos da estrutura.
Dito isso, é claro que a ideia de “Bootstrap Bankruptcy” é mais do que a dívida de tecnologia de uma marcação fortemente acoplada. Inevitavelmente, a maioria dos sites que desenvolvem uma base significativa de usuários ou leitores eventualmente desejará se graduar no Bootstrap e definir seu próprio conjunto de estilos. Normalmente, o problema é que isso pode exigir um grande esforço quando o Bootstrap está tão profundamente integrado em cada canto de seu HTML.
A abordagem que sugeri, de aderir à marcação semântica mesmo ao aproveitar as definições de estilo do Bootstrap, oferece o melhor dos dois mundos. Você consegue criar algo atraente rapidamente, construindo a partir do trabalho da equipe Bootstrap. Então, quando for finalmente a hora de seguir em frente e começar a trabalhar em um design personalizado, você pode descartar a referência ao Bootstrap e terá uma estrutura HTML semântica e clara para trabalhar.
Respostas relacionadas:
Alterar o ponto de interrupção do Bootstrap NavBar