Don't pollute your HTML with Bootstrap classes

When coding HTML templates, we have to make sure that we don’t pollute the view with presentation classes. The rule of thumb would be:

If we don’t follow this simple rule, it will be harder to maintain a growing codebase, and let’s not talk about what a nightmare it would be if we ever need to upgrade to a newer version of Bootstrap.

It’s easy to fall for this specially when using bootstrap column classes. Let’s see an hypothetical example:

/ DON'T DO THIS PLEASE
.appointments.col-md-6.col-sm-12
  .week.col-sm-12.pull-right
    / Something here

In the previous example, we’re forcing all the appointments to have the same presentation (everything with .col-md-6.col-sm-12), so if there’s a theme that requires the appointments to have a .col-md-3 we will run into some troubles.

A more maintainable way, would be to use the HTML to define only the structure like this:

.appointments
  .week
    / Something here

Then in the SASS file we can use bootstrap mixins to define the presentation like this:

.appointments {
  @include make-md-column(6);
  @include make-sm-column(12);

  .week {
    @include make-sm-column(12);
    @extend pull-right;
  }
}

By doing this, we won’t couple the HTML to the styling, and we will be able to freely change the presentation.

Please take a look into Bootstrap grid mixins if you want to see all the available mixins.