Lately I've been learning Bootstrap and it's great to get a basic layout up and running quickly. However, it has one great drawback: a lack of separation of concerns.
Most back-end solutions are either n-tier or use vertical slices. Either way, each tier or slice has one responsibility. A tier can be responsible for data persistence or input validation. A slice can be responsible for updating a business entity or transitioning an entity from one state to the next.
Taking the idea of single responsibility to the front-end means that each part does one thing and does it well. This means that HTML should determine what is displayed and CSS should determine how it is displayed.
This is where Bootstrap breaks single responsibility: the CSS classes set determine how the content is displayed. This is inherent to how Bootstrap works, but it muddies the HTML with presentation concerns. It is not uncommon to have five to ten CSS classes for a responsive component. Instead, an element, id or class should indicate its role on the page and CSS should take it from there.
So instead of this:
Most back-end solutions are either n-tier or use vertical slices. Either way, each tier or slice has one responsibility. A tier can be responsible for data persistence or input validation. A slice can be responsible for updating a business entity or transitioning an entity from one state to the next.
Taking the idea of single responsibility to the front-end means that each part does one thing and does it well. This means that HTML should determine what is displayed and CSS should determine how it is displayed.
This is where Bootstrap breaks single responsibility: the CSS classes set determine how the content is displayed. This is inherent to how Bootstrap works, but it muddies the HTML with presentation concerns. It is not uncommon to have five to ten CSS classes for a responsive component. Instead, an element, id or class should indicate its role on the page and CSS should take it from there.
So instead of this:
<div class="col-12 col-sm-9 col-md-6 mx-auto ...
You get this:
<div class="post-highlight"> ...
The drawback of this is that CSS development takes more time, but the view implementation becomes much simpler, especially when the presentation of the front-end changes slightly. With Bootstrap you have to diff the front-end and the view and see which CSS classes changed, but with a better separation of concerns you probably don't have to change the view at all, as only the CSS changes.
The above means that with a better separation of concerns there is also a better separation of responsibility between back-end and front-end, where the HTML is the contract between both ends.