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.