Using CSS preprocessors effectively - Jonas Wagner¶

Tags: django, djangocon

Normally he talks about crazy and creative stuff. Now he’s got something more important to talk about, according to himself :-)

Most programming languages make sure you can write nice and clean and clear code. CSS does not. Here are some issues with css:

• No variables. So you have to repeat a lot of stuff (like a color). There is a deeper problem, though: it means you cannot name things. Naming things help you understand them and if you cannot....
• No hierarchy. The DOM is hierarchical, but CSS is just a flat list.
• Prefixes. CSS3 is nice, but we often still have to use browser-prefixes. A lot of them.
• Sprites. The performance boost is nice, but maintining them is a pain.
• A lack of abstraction. It is basically just output.

He asked for a show of hands: half of the audience already used a css preprocessor. There are two main preprocessors:

• sass/scss. There are a couple of variants of this one. It started out in ruby, but there’s a python compiler now.
• less. It came out of ruby, but it is implemented in javascript now. You can even use it on the client. The most famous usecase is twitter bootstrap.

The features of both are more or less equivalent, both are a superset of css. He recommends scss. He likes the syntax more. And there’s a python css compiler for it.

Some good things about such a preprocessor (some points are scss-specific, though):

• Variables. Handy especially for specifying colors. $main_color: #123456;.

• Math and functions are available:

  $totalWidth = 120px;
  $padding = 10px;
  width = $totalWidth - $padding;

• Hierarchical nesting:

  #sidebar {
      some-rule: 10px;
      ul {
          another-rule: 2em;
      }
  }

• CSS hacks. You can do all the hacks with a simple mixin. Same with vendor prefixes.

• Single line comments. Small feature, but way nicer than /* ..... */

  p {
      // A comment
      width: 200px;
  }

• SCSS has a sprite-map function for automatically creating a sprite out of a folder full of PNGs with a handy syntax to use them in your (s)css.

• You can organize files and import them. Yes, importing css :-)

He then gave a demonstration. For that he used the following python packages:

• webassets.
• pyscss. (Note: corrected the link, see comment by Leon below, thanks)
• cssmin.

There are also some drawbacks, however:

• You increase complexity, so there’s more room for errors. Simple.
• It makes debugging harder (but it is not that bad, there are also firebug extensions to help you).
• Potential for bloat with all those mixins you can use. But gzip compression will help you, especially when there’s duplication.

Conclusion: preprocessors solve common problems. They allow you to focus on writing clear and meaningful css. Try it and you’ll never want to go back. (Note by Reinout: very, very true. I use less myself, btw.)