Semantic classes in Bootstrap

According to Bootstrap, “you can modify the variables to your own custom values, or just use the mixins with their default values.”

Using @extend

An example of writing semantic code using Bootstrap is using @extend:

As written by Brad Borrow in the article Using Sass To Semantically @extend Bootstrap, he says that Bootstrap “makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.”

He goes on to explain what writing semantically means, “HTML documents are intended to be descriptive of their contents from an information hierarchy perspective. One should be able to read them and know what they are about, not how they will look.”

So to use Bootstrap semantically, Brad further states that we can “leverage the power of Sass’s @extend functionality to solve this problem. From Sass’s documentation: @extend works by inserting the extending selector anywhere in the stylesheet that the extended selector appears. This means we can use our semantic selectors and extend Bootstrap’s selectors to get all of its goodness.”

Using @mixins

Another example of writing semantic code using Bootstrap is by using mixins:

In this “Bootstrap and Sass” video (by Easy Dev Tuts) it shows us how to use Bootstrap’s mixins for Sass. You can also download the repository of this tutorial.

So instead of writing:

  <div class="container">
   ……
  </div>

From this example we include the mixin container-fixed to apply the container. In this example, it’s applied to the body tag:

body{
	@include container-fixed();
}

So instead of writing the following built-in Bootstrap classes in our HTML:

    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-9"></div>
    </div>

We can create our own (of course, trying to be semantic as possible) such as the below, which will give the same results as using the above Bootstrap classes.

       .site-header{
		@include make-row(); // adds a row
		}
		.site-logo{
			@include make-sm-column(3); // adds a column
		}
		.site-nav{
			@include make-sm-column(9); // adds a column
		}
	}

Brett Jankford wrote an in-depth article about his thoughts on semantic HTML class names and maintainability.

While indicating the clear benefits of using Bootstrap and built-in classes, “frameworks like Twitter Bootstrap which use visual (presentational) class names are widely popular. Back-end developers that I’ve talked to that have used Twitter Bootstrap seem to really like it. They love the plugin-in-play ability with adding visual class names to elements. They don’t have to get in and mess around with the CSS, they can just add and remove classes as needed.”

There is a need to think about future maintainability of classes, “with individual role based classes, this flexibility is tricky. If we class the sections of the page individually, based on their role, with little thought to reusability, the CSS and the corresponding HTML classes offer little ease of maintenance and extensibility. If new sections are added, we need to add new role based classes along with additional CSS that corresponds to these new classes.”

To summarise

I’ve described various methods on how to use semantic classes using Bootstrap. It gets complicated when trying to come up with new semantic classes to replace Boostrap’s existing classes especially for components such as; the navbar, jumbotron and carousel to name a few.

So in the real world, can we really afford the time to completely re-structure classes to be semantic? It’s really up to your individual needs and the size of your project. You might only need to use semantic classes on the responsive grid structure but when it comes to using components, that will be challenging! And another thing to consider is, do you really need the extra bloat of a CSS framework or is it the responsive grid that you only need? (and there are a plethora of grid only frameworks).

To be semantic or not to be?

References

Further reading