Does bootstrap break separation of concerns and defeat the purpose of CSS?

Question

Although I have seen a few Bootstrap sites, I have only just started to look into it seriously and I was quite shocked by what I saw in the HTML - loads of nested divs with multiple classes attached to each.

In the old days before CSS, people used to decorate their HTML with fonts, colours, etc., and this was considered a "bad thing". CSS enabled the HTML to be very clean and free of styling information. This is "separation of concerns" which is considered to be a "good thing".

Although the styling in bootstrap has a level of indirection (i.e. it references class names rather than directly specifying colours etc.) it is basically putting the styling information back into the HTML instead of using CSS as it was intended.

Don't get me wrong, I have written enough CSS to know how difficult it is to maintain, so I can understand how bootstrap came about. My question is really whether bootstrap is seen as a hack for people who want to knock up a site quickly and don't care about separation of concerns, or whether it's actually considered a good practice to keep the style information close to the HTML (which you could argue is a kind of encapsulation) rather than lumping it all together into a separate file (i.e. that CSS wasn't really the right solution).

Answer 1

My question is really whether bootstrap is seen as a hack for people who want to knock up a site quickly and don't care about separation of concerns

A lot of Bootstrap utility classes are useful hacks to get a site up and running quickly yes, but if we ignore the utility classes, most of Bootstrap's components are actually well designed reusable components that can mesh well with semantic markups and they're fine semantically speaking (although they do force you to use their naming, and standardization isn't necessarily a bad thing).

My principle when marrying Bootstrap and Semantic markup is that you don't want to drink too much of either side's Kool-Aid. They're both fine techniques to help solve problems and minimise the cost of maintenance, but they both also can create their own set of problems if you inconsiderately apply the good basic principles without fully understanding when or why the techniques are done certain way.

Generally, you should be writing most of your major site components with plain old semantic markups and define useful blocks of functionality in your CSS; use Bootstrap for its reusable, composable components here and there are ok (i.e. don't build the entire house with Bootstrap, but using Bootstrap-branded windows and furnitures are perfectly fine). The Bootstrap components are great because it gives you a common language to talk about the common components of a site in higher level than raw HTML/CSS, and it allows you to prototype really quickly.

It's really great to have decent looking, well tested buttons, forms, and basic grid system without having to write huge amount of code yourself. But you also don't want restrict yourself to Bootstrap, as you may find that forcing Bootstrap beyond the basics often lead to worst maintenance nightmare than straight styling.

However, Bootstrap utility classes should be used sparingly, reserved for minor tweaks where practicality beats purity, rather than building your primary layout definition with it. If your tags have class attributes that are mostly utility classes, you're doing it wrong, IMHO.

Most Bootstrap utility classes are essentially just wrapper classes for one liner CSS. And having to add them everywhere it's used can make your HTML code look very unreadable and bloated, with all the problems of inline style attributes. They certainly don't make the code more maintainable.

Answer 2

Depends. Bootstrap can be used both ways. Many bootstrap classes are semantic, so does not break separation of concerns. E.g.

<div class="alert alert-danger">Beware of the leopard</div>

This is perfectly in line with how CSS is supposed to be used.

But bootstrap also have classes which are more directly coupled to presentation, eg. btn-dark, btn-xl which define presentation properties rather that semantic properties. That is not exactly in the spirit of CSS - but it is still much more maintainable than having e.g. font-size specified directly in the HTML.

Answer 3

I think a de facto truth that complete separation of style from content via HTML and CSS is not possible.

Take a look at http://www.csszengarden.com/

At first glance it looks like the perfect demonstration of separation of content and style. But if you take a close look at some of the more advanced designs they are putting content in the css via background images and the like.

On a modern single page site you bring javascript frameworks into the picture, which will add and remove style and content dynamically.

Rather than achieve the goal of a simple layout language which left the display to the browser, HTML has become a vehicle for displaying pixel perfect designs where sites only function at all on advanced browsers.