Semantic CSS with Bootstrap and LESS

DoingBootstrapRight.html

<div class="DoingItRight">This is how it is done!</div>

DoingBootstrapRight.less

// @Import some bootstrap mixins

.DoingItRight {
  .make-xs-column(6);
  .make-sm-column(4);
  .make-md-column(3);
  .make-lg-column(2);
}

DoingBootstrapWrong.html

<div id="DoingItWrong" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">You're doing it wrong!</div>

With Bootstrap's CSS version, any updates to the markup feel like "Barfing CSS Classes into your DOM." The sea of CSS classes in your markup eliminate any semantic naming of your DOM elements, making it much more difficult to understand the code.

Instead, pull in the LESS version of Bootstrap. Using the mixins available within LESS Bootstrap, semantically-named classes can be created while still maintaining the same functionality, including a fully responsive design.

@jayharris — it's definitely the readable approach — but how much rendered CSS does that emit? if you have too many of those 'semantic' classes, rather than a few consistent layout elements, it can become untenable.

This on its own doesn't reduce the emitted CSS, but it allows you to do things that will. For example, doing this allows you to eliminate @import "grid.less"; which means you've removed all of the col-[lg|md|sm|xs]-\d+ classes, their push, pull, and offset classes (which is about 800 lines of emitted CSS).

The above outputs 25 additional lines:

.mySemanticClass {
  float: left;
  width: 50%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .mySemanticClass {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .mySemanticClass {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .mySemanticClass {
    float: left;
    width: 50%;
  }
}

@andyfowler - I've written large, rich, commercial applications semantically that had a smaller css file than what Bootstrap adds out the door.

Edit - I guess maybe a better way to say it is, if you are using Bootstrap in your project, you are already more concerned with abstraction and reducing developer effort than file size.