CSS preprocessing with SASS

Don't write CSS directly.  It's just not worth it anymore.  Use SASS and precompile your CSS to avoid repetition, make changes easier, and to use the nesting features that should have been built into the spec in the first place.  The SASS website explains how to install and use it, but if you are clever enough to be using Linux you can just install it from the repositories.  Don't be put off by the Ruby connection if you are not a Ruby person...it is written in Ruby but the CSS it generates is completely independent of any backend languages.

The only complicating factor is that you will have to include the compiling and building in your workflow.  I have started separating my HTML5 code into separate source directories and using makefile to assemble the final package.  It is a little more work, but it opens the door to things like templating, minifying and combining javascript, unit testing, etc., that can make a much more efficient and stable final product.  And you can start using on existing CSS immediately since valid CSS is already valid input for SASS.

The key features I like over just writing standard CSS are:

• Nesting, which makes the inheritance of properties so much clearer and makes code more readable
• Includes, which allows assembling from multiple files
• Mixins, which are like macros
• Variables, which make repetitive colors and sizes a breeze (and should have been first on this list)
• Formulas, which make creating relative sizes of items a snap (and also should have been first on this list because it is the feature that keeps me from having to do math)

The documentation on the SASS website is decent, but I'd also recommend this page which runs down the various features much more succinctly in comparisons with other preprocessors such as LESS and Stylus.  The examples are good references for the syntax and why you would use the features.