So fresh, so clean – Why we use Bootstrap utility classes to keep CSS slim

When it comes to maintaining code on our projects, we adhere to the campground rule – “always leave it better than you found it”. If you’ve ever updated a web project, you may have found some less than stellar comments and code. 

One of the biggest challenges can be trying to read through undocumented CSS. You can lose valuable hours investigating design rules just so you can make a simple update and keep within the existing style guide. 

There’s always the temptation to write new classes. Sometimes time isn’t on your side and the change needs to be done now. We know CSS is forgiving with redundant classes, but there are downsides to writing new classes. This is especially true when you’re using a framework like Bootstrap that provides plenty of useful utility classes.

So why do we prefer Bootstrap utility classes? Here are two ways of dealing with a change – first, by writing new classes: 

Writing new classes

HTML
<table>
  <thead>
    <tr>
      <th scope="col">Engineering & Development</th>
      <th scope="col"><span class="sr-only">Position Location column header</span></th>
      <th scope="col"><span class="sr-only">Apply column header</span></th>
    </tr>
  </thead>
  <tbody>
    <tr class="posting">
      <td class="opportunity">React Native Developer</td>
      <td class="opportunity">Kitchener, ON</td>
      <td class="apply">
        <a class="btn btn-link" href="http://bit.ly/BitBakeryJobs" target="_blank">Apply</a>
      </td>
    </tr>
  </tbody>
</table>

CSS
.posting {
  box-sizing: border-box;
  display:table;
  border-bottom: 1px solid rgba(192,192,192,192);
  width:100%
}
.apply {
  text-align: right;
  padding: 50px 0 0 0
}
.department {
  padding: 50px 0 0 0;
}
.opportunity {
  padding: 25px 50px 25px 5px;
}

Using Bootstraps Utilities

HTML
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col" class="pb-3">Engineering & Development</th>
      <th scope="col" class="pb-3"><span class="sr-only">Position Location column header</span></th>
      <th scope="col" class="pb-3"><span class="sr-only">Apply column header</span></th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-bottom">
      <td class="py-3">React Native Developer</td>
      <td class="py-3">Kitchener, ON</td>
      <td class="text-right py-3">
        <a class="btn btn-link" href="http://bit.ly/BitBakeryJobs" target="_blank">Apply</a>
      </td>
    </tr>
  </tbody>
</table>

CSS
<!-- Nothing to see here -->

When you look at both examples, they’re not all that different. One change is that the custom classes from the first example are replaced with spacing utilities like .pb-3 and .py-3 in the second example.

There’s no major difference in how browsers render these examples either. So why do it using the Bootstrap utilities? 

Long term maintainability

Our Bootstrap Utility example doesn’t have any new CSS at all. This keeps your custom CSS file leaner and more maintainable over the long term. 

Site consistency

Because it’s derived from the base spacing, the padding is consistent with the rest of the site. The padding is defined in the Bootstrap variables file. This eliminates any guesswork for how much padding or margin you should use.

These alone aren’t a reason to use a framework such as Bootstrap. If you’ve already got a framework in your project. then using its built-in utilities will save you time now – and in the future. 

Want to learn more? I recommend reading through the Bootstrap documentation to see how else you can avoid rewriting CSS that’s already been written for you.

Photo by Fatos Bytyqi on Unsplash