Each time I redesign my blog, I try to implement some cool, visually interesting feature. This time around, I decided to build a widget to display post archives, styled to look like a vertical bar chart.
I recently wrote a post about when it’s appropriate to use CSS classes. In it, I made the case that HTML5 Data-* attributes can be used instead of CSS classes to identify elements on a page. In this post, I’ll describe exactly how to do this.
Compass and Twitter Bootstrap are two excellent web development frameworks built on top of CSS pre-processors (Sass and LESS respectively). Both can be very useful even though the approaches they take are rather different.
CSS classes can serve multiple purposes when building web pages, which sometimes leads to ambiguity. In fact, this ambiguity is often the cause of arguments over when it’s appropriate to use CSS classes.
Sass is a language / framework which compiles down to CSS. The thing I like most about Sass is how it helps you apply the DRY principle to your style sheets. If you use it well, you can drastically cut down “copy-and-paste” code and actually get reasonably maintainable CSS to work with.