July 9, 2019

Why Bootstrap websites make me want to die!

Were you ever in one of those meetings, where ideas are flying and everyone is getting all excited about the prospects of a new project? Inevitably someone makes a suggestion that sounds way smarter than everyone else’s suggestion and everyone differs to the one with the crazy smarts in the room, riffing off their initial concept. Eventually things get out of control and people start running with the absolute worst ideas, even though they may have started with a brilliant concept. That’s Bootstrap.

Allow me to elaborate:

1. Bootstrap is bloated and awful, but not in they ways you would expect when you are first learning it.

Bootstrap is a full library of CSS’d assets and classes that makes it “easy” to create and “design” layouts that are functional, even if front-end development isn’t your forté. It even has SASS/Less iterations so you can launch with only the parts of the library you need. That sounds pretty cool.

But, it introduces the need for javascript to render, style, and use basic form elements. That’s not the worst of it. It employs a system called “class stacking” that allows you to specify the properties of the elements you’re trying to style. The result of this is bloated markup and needlessly nested elements that make it really hard to “read” the code if you’re working on a team, leaving your design patterns un-semantic and prone to formatting errors from page to page.

If you are working on a team, you run the risk of code drift as everyone has a specific style of coding. This makes templating almost impossible if you’re trying to get a web page marked up quickly and easily.

2. Anti patterns for websites

Don’t get me wrong Bootstrap has some good uses, like making web applications, and standardizing the look and feel of your interactive elements. But it’s core layout principals completely go against front-end best practices for websites.

You want to keep your websites as semantic and “clean” as possible. Try not to use any extraneous elements, and focus on the least amount of code you need to honour the original design of the page.

By using bootstrap you’re almost guaranteeing that your site isn’t future proof. The code sets you use will quickly become obsolete and you will have to start from scratch again and again to make sure your site design is up to date with modern design trends.

To illustrate an example, I was given a project recently that required a complete site refresh. The lead developer coded the site from scratch following very basic best practices. I was able to take that minimal code and write a completely new stylesheet that took the site from a 13 year old, dated, and static-width abomination and convert it to something that could be viewed on a smartwatch, as well as a desktop. When you follow best practices you save yourself a HUGE amount of work in the future.

3. Innovation killer

If you’re in the business of “kill-it-and-bill-it” you will have no problem taking shortcuts and getting your designs to the end user as quickly as possible. But if you want to turn out a best-in-class product, you need to spend a little more time making sure you get it right. Even allow yourself to question some assumptions about website interface designs in general.

Using a framework like Bootstrap to design your websites is like turning off your creative brain, and just using cookie cutters to create. You’re relying on someone else to solve all your problems, hoping they have thought of everything. Only a constant application of creative problem solving will carry your development to the next level. Which would you rather be, the guru that everyone turns to for the coolest ideas, or the hack that has to implement them based on everyone else’s legacy code. Pick a direction.

Conclusion

Don’t get me wrong. The team that created Bootstrap is brilliant. Some of their implementations are beautiful, and the original WebApp purpose for Bootstrap works fantastic. You can learn a lot about good CSS work just by pulling apart a lot of their classes. But, if you want a site that’ll stand the test of time, and allow you to iterate and add new functionality, regardless of the team that started it, you need to adhere to best practices and throw in your own brand of innovation. That’s the only way you’ll progress in your career, and the only way the internet as a whole will evolve.