Do you ever find yourself writing up the CSS for a new design only to quickly find yourself lost in loosely organized blocks of code? And what was that damn hex code again for that special shade of mustard yellow? There it is! Wait, wrong color.
How about a better option?
Don’t get me wrong, I love CSS… It can just get tediously inefficient and unorganized. Recently I found LESS, a dynamic stylesheet language that compiles to CSS on the client-side with some Javascript, and I’m not turning back. Now I can assign each color to a variable (e.g. @color: #fff), apply mixins (functions that can take in parameters and produce a common bit of code, such as CSS3 round borders), nest elements in a more logical way without writing long selector names, and even use math and Javascript evaluations!
It’s really simple, and LESS is designed so that it still feels like natural CSS, just with more functionality. All you have to do is include your LESS stylesheet and the less.js compiler in the <head> of your page and it’ll turn into CSS on the fly. Of course, you only want to do this for development, but you can always just grab the output and use it as your final CSS file.
The Semantic Grid System
What I perhaps love most about LESS is the extensible nature. Not only have I found a selection of CSS3 mixins called LESS Elements, I’ve found an entire grid system based on it: the Semantic Grid System. I wasn’t really a huge fan of any of the grid systems previously available: they weren’t made for dynamic and/or custom grid widths and columns, they weren’t suited for responsive design (except the 1140 Grid, but that can only collapse into one column), and the width of an element had to be defined in the HTML using an unsemantic class name like grid_x.
The Semantic Grid System solves all of those problems. You can easily specify the column and gutter widths in addition to the number of columns as variables at the top of your LESS file, and these can also be changed for different resolutions using CSS3′s media queries. Controlling the width of an element is done completely within the LESS stylesheet; you just have to declare the mixin, like below:
header { .column(12) }
article { .column(9) }
aside { .column(3) }
It’s as easy as that, and there are plenty more features where that came from, including nested columns and column offsets. This is by far my favorite grid system, and I don’t plan on moving away from this flexible combination of tools.
Lastly, there are indeed alternatives to LESS, and the Semantic Grid System has recently been updated to work with them. You’ve got SASS (with a new CSS3-based syntax) and Stylus (uses a very DRY-based approach). It’s all up to the syntax you prefer, and LESS feels like the closest thing to writing natural CSS.
If you haven’t tried out any of these tools and you’re fed up with that convoluted mass of CSS, treat yourself to a better way of writing CSS!