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>

@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.