Skip to content

Instantly share code, notes, and snippets.

@jayharris
Last active September 27, 2017 15:49
Show Gist options
  • Save jayharris/9280713 to your computer and use it in GitHub Desktop.
Save jayharris/9280713 to your computer and use it in GitHub Desktop.
Semantic CSS with Bootstrap and LESS
<div class="DoingItRight">This is how it is done!</div>
// @Import some bootstrap mixins
.DoingItRight {
.make-xs-column(6);
.make-sm-column(4);
.make-md-column(3);
.make-lg-column(2);
}
<div id="DoingItWrong" class="col-lg-2 col-md-3 col-sm-4 col-xs-6">You're doing it wrong!</div>
@jayharris
Copy link
Author

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.

@andyfowler
Copy link

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

@jayharris
Copy link
Author

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%;
  }
}

@justinwinslow
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment