Twitter Bootstrap is a CSS framework used to provide some commonly used design elements for web projects. It’s great to get your project up and running quickly.
I’m not much of a designer, and (most of the time) Bootstrap helps me easily achieve things I’d be hard-pressed to do on my own: well-designed margins & padding, carefully selected colours, and fluid grid layouts that work cross-browser.
One thing that irks me about Bootstrap, however, is the fact that it litters your markup with their non-semantic class names. If you’re not familiar with semantic markup, the idea is that your HTML markup should only indicate meaning, not presentation. For example:
1 2 3 4 5 6 7 8 9 10 11
However, when you look at Bootstrap’s example code, the markup is filled with non-semantic class names:
1 2 3 4 5 6 7 8 9
I’m working on an NHL hockey prediction game in Rails, and in it, I want to use some Bootstrap elements:
- Buttons to select the home team by 1, or the away team by 2
- Badges to show the user’s score
For instance, if I want to quickly use the green and turquoise buttons, I could just stick
btn btn-success classes for some buttons (say picking the home team), and
btn btn-info for others (say, picking the away team). But now I’ve lost the ability to do things by meaning: I’m not being DRY. If I ever decide the colours should change, I have to search-and-replace on
btn-success and this may affect other places in my markup.
This means I can make use of the @extend directive, and keep my class names semantic. So, rather than giving my buttons class names like
btn-success, I can do the following:
1 2 3
1 2 3 4 5 6 7 8 9
Now, my markup has no Bootstrap classes in it. It looks like:
Cool! I did the same thing with badges elsewhere in the project. To show the impact of a user’s pick, I apply either the
loss class, and
@extend the Bootstrap badge classes in my SCSS.
Some people believe this isn’t worth it, and when it comes to structural/grid layout classes, maybe they’re right. I still think it’s a good idea to separate my “home team by 1” buttons from my “create a new user” buttons, even if they both have the same
btn-success class in the end. It will make things easier to change in the future, and won’t require me to apply a second CSS class if I ever need to do more.
For my next project I’m going to take a closer look at Foundation, a competing CSS framework. This framework seems to have native support for Sass, a first-party Rails gem, and their documentation treats using mixins as a first-class citizen.