Monday, October 4, 2010

Refactoring CSS

SASS and LESS are CSS preprocessors which offer a fantastic way into more structural CSS.
They provide the ability to use variables, mixins, arithmetic and inheritance to create CSS rules, which are then parsed to produce valid CSS. The real benefit of this is that it allows refactoring of CSS, so you can take whatever you've written, and extract commonly-used values / repeated sections, and assign them to variables which can be referenced throughout the CSS. Variables can be given semantic names to make the CSS more readable. Additionally, with nested rules, you can see the cascading hierarchy directly in the code, making it easier to identify redundant rules and repeating patterns.
SASS is a little more advanced in terms of features, but LESS offers a javascript processor, for easier testing and integration. You choose, but either way this is a great step forward. This stuff should be in the CSS spec from the start.

No comments: