Working with cascading stylesheets (CSS) is fairly straight forward and easy to manage. But it could be better. For example, there is no dynamic functionality with CSS that can work out simple maths or assign variables to be reused throughout code.
The reason for this, is that CSS isn't dynamic. It is a language used to describe how HTML markup should be presented to a user.
CSS Preprocessors
There are plenty of CSS preprocessors out there that make CSS more dynamic. Some preprocessors handle more than others, but essentially they all perform basic functionality that allows front-end developers to use variables, statements, loops and more!
The leading preprocessors (based on recommendations from friends, colleagues and the online community) are LESS and Sass. Others include Turbine, Switch CSS and CSSPP, but none compare the the recommendations for LESS and Sass.
LESS CSS
I had no preference between LESS and Sass. In fact, both seemed equally good at what they did and the main difference was syntax.
Eventually, I decided to use LESS. Not becuase I thought it was better, but because there was a plugin available for Microsoft Visual Studio and .NET to build dynamic stylesheets using a CSS preprocessor that instantly converted the LESS to a minified CSS file for use in projects.
Because I spend the majority of my time working on front-end development for Umbraco and .NET websites and applications, LESS seemed like the best choice!
Using LESS
I found LESS very easy to work with. I originally thought there was no need for preprocessors. Vanilla CSS is more than adequate for developing stylesheets. And it still is.
However, I now understand some of the benefits of LESS.
- Variables: the ability to store colours, styles and sizing into variables helps make CSS more maintainable in the long-term
- Maths: using variables and numbers within LESS makes sizing easier - just subtract 1px size to the base font for smaller text
- "Mixins": reusable CSS and snippets for use throughout CSS makes it easier to implement browser prefixes for new CSS3 functionality. Changing this in one location is far simpler than finding all locations throughout many stylesheet files
- Functions: built in LESS CSS functions allow for easier manipulation of colours, strings and maths within dynamic CSS
The overall theme of the CSS preprocessor is to make life easier for the developer. CSS can be reused, which is good for consistency and continuity of development. Mixins make CSS easier to manage and update.
Everything about a CSS preprocessor is designed to increase speed of development, whilst providing a consistent method of development.
Along with excellent documentation, and plenty of online community action in this area, it is safe to say that we will continue to use LESS above vanilla CSS for some time.
