Benedikt Wolters

The countless problems of pure css

The one thing while creating .css-Files, which really bothers me is that there is no variability at all. Let’s say you want to change a color value that you have applied to like 20 Style-sets in your css, you’ll need to replace them all by hand. Maybe there are colors slightly different to the color you want to change (i.e. a hover-color) you’ll need to search them all and change them. A painstaking strain.

Sometimes you’ll need to calculate values (e.g. with-values) from another value. CSS has no solution for this, but calculating it by yourself looking for the values you need (There is no DOM in css).

Also in CSS there is that nice “approach” to have some sort of object-oriented style language. Well css has of course inheritance, but wouldn’t it be nice to have a more dynamic structure that allows variables, conditionals and own-functions.

Another common problem in CSS is repetition. The classic example for unnecessary repetition is the border-radius or the opacity-rule:

So this is like a template we use on and on again and it violence to the DRY-paradigm. The bigger your project gets the harder you’ll wish to have a solution for that. Luckily there is a solution for this problems. Actually there are more than one. It’s CSS Pre Processors There are a a few out there, but before we’ll get to them there is an easy approach: Using PHP as a CSS Preprocessors.

Ok. Let’s use php to do fancy-css

If you have read my entry about templating systems you’ll know I am no fan of php as templating language. In this context i think its the same argumentation: php is to verbose and will make your css look even more unreadable. (Of course there might be approchaes, where this could work out i.e. if all you need are variables, but thats not my point)

Take a look at the following example and tell me if its verbose or not:

Another problematic thing about PHP is the caching aspect - again. And talking about css I dont think there is the necessity to have a css rendered on every site request. In fact i dont think a big caching system is needed at all. Usually there is a point where you have a css ready to go, you “compile it” - (using css prepocessors), optimize and compress it. It will not change.

The Solution(s)

There are currently many CSS-Preprocessors out there: LESS, STYLUS, SASS and SCSS, which is a newer syntax for SASS. In a nutshell all these preprocessors have features like:

• Variables
• Functions
• Mixins
• Arithmetic Operators
• url()-Rewriting

Some of them even implement:

• Iterations
• Conditionals
• Nested Selectors
• Integrated CSS Compression
• Color-, Mathematical-, String- and Regex-functions

While LESS, SASS and SCSS are trying to adopt the original CSS Syntax, STYLUS reduces the css syntax for shortness sake. In STYLUS there are no curved brackets and no semicolons. Indentation is used to seperate selectors and contructs.

As for now I can’t really tell which one is the best, but this is also a bit dependant on your needs. So let’s take a look at Stylus:

Stylus - quintessential for a CSS Preprocessor

Like I said, Stylus concentrates on shortness and is really easy:

becomes

vendor is a pre-defined library containing standard mixins. You can define variables, use their contents inside other variables and use operators to modify them:

compiles to:

You can use nested-selectors by indenting them:

would be:

Here is a nice Video by tjholowaychuk showing the core features of STYLUS.

Compiling in STYLUS

Stylus uses Node.js. You can install it over the Node.js packet manager:

There is an executable you can run and use to compile your .styl-files. Learn more about it here.