Can we have cleaner HTML with Bootstrap?

The other day a colleague consulted me about CSS frameworks:

The client doesn’t want to pollute the HTML with those Bootstrap classes

I understand. If you ever used Bootstrap you know each HTML element might have 3, 4 or more classes. For columns, colors, custom styles…

Can we use custom classes with Bootstrap features?

Yes! You can have clean HTML. Only adding your own more-semantic classes while using the power of bootstrap buttons, grid and all its other features.

I’ve created an example achieving the same result one with core Bootstrap Classes and the other with Custom Classes. Stick with me until the end for the conclusions.

twitter-widget-demo

HTML with Custom Classes

The code below might be more readable, you can understand what the element does or contains.

<section class="container">
 <div class="twitter-widget">

 <div class="twitter-header">
 <div class="twitter-header-content">
 <h2>My Twitter Widget</h2>
 </div>
 </div>
 <!-- /.twitter-header -->

 <div class="twitter-actions">
 <div class="twitter-buttons">
 <!-- /.twitter-buttons -->
 <a href="#" class="twitter-button"><i class="fa fa-twitter"></i> Tweet this</a>
 </div> 
 </div>
 <!-- /.twitter-actions -->

 <div class="twitter-content">
 <p class="twitter-content-image">
 <img src="https://placehold.it/800x400/" alt="" class="img-responsive" />
 </p>
 <p class="twitter-content-text">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br><br>

 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br><br>

 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>
 </div>
 <!-- /.twitter-content -->
 </div>
</section>

SCSS with custom Classes

Here’s all the SCSS you have to write to make your classes behave like Bootstrap components. It’s not pretty.

@import "../vendor/bootstrap-3.3.6/bootstrap/_mixins";
@import "../vendor/bootstrap-3.3.6/bootstrap/_buttons";

.twitter-header {
 @include make-row;
}

.twitter-header-content {
 @include make-xs-column(12);
}

.twitter-content {
 background: $brand-primary;
 color: white;

 @include make-row;
}

.twitter-content-image {
 @include make-xs-column(12);
 @include make-sm-column(6);
 @include make-md-column(3);
}

.twitter-content-image,
.twitter-content-text,
.twitter-content {
 margin-top: 1.5rem;
}


.twitter-content-text {
 @include make-xs-column(12);
 @include make-sm-column(6);
 @include make-md-column(9);
}

.twitter-actions {
 @include make-row;
}

.twitter-buttons {
 @include make-xs-column(12);
 @include make-sm-column(3);
 @include make-md-column(2);
}

.twitter-button {
 @extend .btn;
 @extend .btn-primary;
 @extend .btn-block;
}

devices

HTML with Bootstrap Classes

Now I’m going to use all core classes and 1 custom.

If you’re comfortable with Bootstrap you’ll identify them and know what’s going on without having to look at the rendered page.

<section class="container">
 <div class="row">
 <div class="col-xs-12">
 <h2>My Twitter Widget</h2>
 </div>
 <!-- .col-xs-12 -->
 </div>
 <!-- .row -->

 <div class="row">
 <div class="col-xs-12 col-sm-3 col-md-2">
 <a href="#" class="btn btn-primary btn-block"><i class="fa fa-twitter"></i> Tweet this</a>
 </div>
 </div>

 <div class="row bg-primary margin-top-1-5">
 <p class="col-xs-12 col-sm-6 col-md-3 margin-top-1-5">
 <img src="https://placehold.it/800x400/" alt="" class="img-responsive" />
 </p>
 <p class="col-xs-12 col-sm-6 col-md-9 margin-top-1-5">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br><br>

 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br><br>

 It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>
 </div>
 <!-- .row -->
</section>

It could be worse than the example above, I’ll give you that. We could have even more classes and “polluted” HTML. However, by using the core classes in my example I just had to write a single CSS class!

SCSS using Bootstrap Classes in HTML

I needed a custom margin on some elements, so I created a generic class for it.

.margin-top-1-5 {
 margin-top: 1.5rem;
}

bootstrap

Conclusions

The client shouldn’t care about the HTML

That’s our job, we as developers, can find the middle ground where the HTML is readable while keeping the CSS as performant as possible.

From the developer point of view

It’s a hassle for Frontend and Backend developers. If they’re already familiar with the core Bootstrap classes they can create components without any new CSS.

On the other hand, if you only use custom classes you’ll need someone to create all the new component custom classes, add it to the CSS pack and then build the HTML for it.

CSS footprint

It’s obviously heavier to have all those styles for each component. Here’s the result of my testing:

  • 309kb with this custom component using Bootstrap includes.
  • 289kb using Bootstrap Classes.

How much weight would we add with 10 or 20 custom components?