Why You Should Stop Misusing Bootstrap

When starting a new project at 10Clouds, there is always a need to find an appropriate way to scaffold the front end, which usually means choosing the framework. In my opinion, a common mistake is to use Twitter Bootstrap as a base for almost every project. Why?

Bootstrap has a lot of advantages, but you need to be very careful when making a decision about the scaffolding tool for your app. For some reasons, people often treat Bootstrap as a Swiss army knife but aren’t aware of some misconceptions about the framework. Here is a short explanation:

Bootstrap was never meant to be used as a website development framework per se.

The thing is that Bootstrap was built at Twitter, so that the developers could work faster by using a standardized interface to present their creations. Then what are the reasons behind that Bootstrap is so commonly used, and is this always so beneficial for the individual projects?

1. It’s popular

Bootstrap is now the most popular front-end framework. The statistics report that until today it has generated 50,517 questions on Stack Overflow and 86,178 stars on GitHub. Quite a few, huh? In comparison, ZURB’s Foundation can boast of “only” 3,403 Stack Overflow questions and 20,831 GitHub stars. The numbers clearly show that Bootstrap has built itself a strong and widespread community of developers.

Developers admit that Bootstrap’s popularity is one of the prevalent arguments when choosing a front-end framework, because it gives us a kind of confidence. The larger the community, the better support and less effort in solving problems.

I completely understand this point of view. I suppose almost nobody would choose anything niche or experimental for a project that demands huge responsibility or has to be completed in a very limited time span. Moreover, Bootstrap can also be very helpful in less demanding (at least from designer’s point of view) cases, like admin panels or apps for internal use only.

Sometimes it happens that we don’t have any CSS ninja in our team, the graphic designer has gone to the Caribbean or even worse, they’re both absent. In such cases Bootstrap appears as a life-saver. But, wait, aren’t there any similar, good-equipped frameworks with convenient skinning options, which might be helpful?

2. I can set up my project quickly and painlessly

As a front-end dev, with every project I’m working on, I need to provide completely different layouts and styles for every design. The graphic designer’s creativity doesn’t like to be limited, so for me it’s super important that the CSS framework I’m using can be easily customized. Also, here comes the compromise between code maintainability and short scaffolding time.

Preprocessors have given us the power of customization. In versions for LESS or Sass, Bootstrap comes with variables and mixins, and allows us to import only the styling components that we actually need. Unfortunately, it’s not the most optimal solution. The process of customization is often not limited to changing the variables’ values in LESSSass file. The common problem is resetting the box-shadow of form inputs. To make it work properly:

• First, I need to @import Bootstrap variables and @import a file with my custom variable overrides (I do this to make it clear, which ones exactly are overridden and avoid conflicts).
• The next step is importing the forms.scss file from bootstrap core and my own forms.scss file, which includes only the code essential for customization:

We must include the file forms.scss (from Bootstrap core files), even if it comes with classes and selectors we won’t ever use in our project. This, multiplied by another few imported components, will result in too heavy code.

In contrary, the Bootstrap’s counterpart, Foundation, has slightly better approach for customization. For every UI element, it provides us with mixins which will be imported and compiled only when we need to use this particular piece of code. This also sets us free from the framework’s class naming convention. Before choosing the right option, consider all main differences between Bootstrap and Foundation.

3. I don’t want to reinvent the wheel

Every framework’s purpose is to deliver a bunch of ready-to-go solutions for common problems: typography, the grid, cross-browser and cross-device support, responsiveness, etc. Not only for styling problems, we usually also need some plugins for creating widgets like calendars, dropdown menus and so on. If Bootstrap equips us with all of that stuff, why not take the benefit?

Like in all cases, you should definitely consider all pros and cons of making use of fully equipped framework. Time spent on customization, performance issues and overall size of code – all of this should matter. Then, you may need something really lightweight, that delivers just a responsive grid and almost nothing more (Pure CSS is an example).

4. I don’t have enough knowledge about CSS good practices

If you care about code maintainability and carefully plan your CSS, you should definitely reconsider using Bootstrap in your project. That’s because:

Bootstrap selectors are hard to override. Just look at this:

I bet it’s possible to apply the same styling in a simpler way, without tight-coupling styles with markup and so much specificity.

It uses its own naming convention. If you want to use your own (or BEM, SMACSS, or any other known convention), they may be difficult or impossible to combine. Sass’ @extend may come here as a solution (LESS also has its counterpart, &:extend() ), or even using Bootstrap mixins. See an example:

Using @extend in your code can be risky, so it’s definitely worth considering at the moment, when you are setting up your project.

As already shown above, Bootstrap class names are often unsemantic. Of course you can be a pragmatic front-end ninja and accept the compromise between time/code efficiency and semantics. It always depends on your goals and the project’s limits.

Updating Bootstrap, when its classes are entangled in HTML, is a pain.

5. Are there any alternatives?

Of course, there are! But remember that every framework was crafted for slightly different purposes and has its very own specifics. Here is a short list of most popular solutions:

• ZURB Foundation – its name is quite self-explanatory, because the main purpose of Foundation was to provide just a foundation to build upon a project. Therefore it’s so flexible and customizable – as little overriding styles as possible!
• Pure CSS – a tiny (4KB minified and gzipped) library that ships you with the minimal amount of components to build a responsive app.
• Susy – a flexible tool that allows you to create responsive and semantic grid systems.
• Compass – it’s a tool library for Sass.
• Bourbon – a simple mixin library for Sass.

If you have experience with any framework or tool, that can be added to this list, share it in the comments!

In conclusion: remember, Bootstrap was originally meant to be a tool for rapid prototyping and wireframing, so using it as a full-fledged front-end framework may turn out inappropriate for your specific purpose. Ask yourself a question, is it worth to use something which solves all most common problems and allows you to quickly set up and develop a project, but pay the price of unsemantic, hard to maintain and often messy code? I strongly recommend using the right tool for the right purpose!