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>

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.