Novahurst Creative

HTML and CSS Parsing Engines and Preprocessors

by Steve Hurst on December 6th, 2010 at 5:06pm 5 comments

I came across an article on Smashing Magazine on the LESS CSS preprocessor and I just don't understand our need to complicate what is a relatively simple, straight-forward language.

LESS claims to produce "leaner" CSS code, but you're adding a language and a compiler on top of your standard CSS documents. HAML does something similar for HTML. The beauty of programming is that any two people can come at a problem with entirely different answers and both essentially be right, but I can't help but see these parsing engines as a fix to the inflexibility of either CSS or HTML to be wrong.

Beyond the false claim of leaner code, LESS does bring some interesting things to the table, such as variables, operations and nested rules. These have valid uses, such as this example:

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

The use of the @brand_color variable there is neat, and would definitely come in handy during a lot of projects. But it can also cause you to lose focus of core optimization at the gain of a little bit of flexibility.

Projects with different scope require a variety of approaches to CSS optimization, and focusing on these shortcuts can cause a narrower view of CSS in general.

The above example, leaner:

#header, h2 {
  color: #4D926F;
}

True, this is ignoring other declarations to both #header and h2, but in the project case where the brand color is important and consistent across a wide variety of elements, I would argue that separating the color declarations away from other font and layout declarations makes more sense. It's also much easier to change and track for later updates. New developers on the project adapt much more quickly to the second example, as well.

Parsing engines such as LESS and SASS for CSS, or HAML for HTML, have good intentions, and usually come with some very interesting features, but at a cost to simplicity. The CSS and HTML specs are by no means complete and perfect, but there is a reason why enhancements that LESS , SASS and HAML bring to the table aren't part of spec. They're solutions to narrow problems, and only one way to solve issues you might have with HTML and CSS.