• Bootstrap considered harmful
  • The Nuggets translation Project
  • Translator: MAYDAY1993
  • Proofread by Kulbear Hpoenixf

Bootstrap has become a very popular tool for front-end projects in recent years. Bootstrap does have many advantages, however, if you happen to have a dedicated front-end engineer on your team. I recommend not using Bootstrap, because in some cases, Bootstrap can do more harm than good.

What is Bootstrap good for

Bootstrap comes with a raster system and also has styles and scripts for many components, including tables, navigation bars, progress bars, pagination, form styles, modal boxes, and prompt boxes. In this article, when I talk about ‘Bootstrap,’ I mean the practice of including all the components (as opposed to choosing to include only a portion, for example, just the grid). Bootstrap is a great tool for backend developers who need to export projects to markup language and don’t want to worry about styling the results. If for some reason, such as budget or other factors, there is no front-end developer or designer on the team, Bootstrap is a good way to fill in the holes.

For designers, Bootstrap also has a place: it’s a valuable tool for moving quickly from design software to the browser without worrying too much about front-end code strategy. Even for front-end developers who work mostly with data and pay little attention to UI and layout, Bootstrap is good for letting a developer focus on building the app itself.

When is it best not to use it

However, if you have a front-end developer on your team, using Bootstrap can potentially waste their valuable time and divert their attention from solving real problems. Bootstrap does exactly what front-end developers are good at, but it does it in a very common way. Your site or application is very specific, so if you use a generic system, it probably won’t work. This means that your code will contain all the possibilities to implement specific requirements.

When you need a lot of code to override the Bootstrap style

Bootstrap was developed by the developers of Twitter to systematize the style of their site applications. When you apply a different style to your site, it means you have to override their style. Most sites don’t look like Twitter. Therefore, if they install Bootstrap, they will overwrite a lot of styles. On some sites I’ve worked with, I’ve found that up to nine out of ten Bootstrap styles are overwritten by the site’s own styles. Quite frankly, this is absurd.

When it complicates simple things

CSS is used to add a simple set of style rules to web pages that can be overridden by code under certain conditions. When you have Bootstrap styles in your site, almost everything in your site has already been set up by a complex set of code rules. Any exceptions will exceed the rules set by the framework. The problem with most web sites is that their styles are often the exception to Bootstrap. The Bootstrap style is complex: you’ll have a grid system with 12 columns that can be combined in any way you want, with special classes to set different offsets and column structures based on the user’s view size. Many sites are simple: no columns on the small screen, one or two columns on the larger screen.

When it creates technical debt

The longer a front-end code base relies on Bootstrap, the more entangled it is, and the more rules it contains just to override the Bootstrap code. This often leads to large technical debt in the code base, especially when the current code is integrated at the back end in a way that often requires manual updates.

When it introduces naming conventions that may not be your application

Naming is hard, and it takes time to come up with meaningful naming conventions for your team and application. Use appropriate nouns for component names, not to be confused with class names with abbreviations like ‘BTN’.

conclusion

Bootstrap and friends are beneficial at various stages of developing the site. However, they are not a magic bullet that will make everything easy: instead, there are many drawbacks that can be avoided by letting front-end developers focus on developing the UI themselves.