David Ziegler's personal blog of computing, math, and other heroic achievements.

02 Apr 2009

CSS compilers rock

I actually wrote django-css because I was looking through the slides from the Reddit keynote at PyCon, and got really excited when I saw what their CSS compiler could do (page 29). Variables, functions, and nested styles in CSS? Could it be? Was I dreaming?

Then after about 5 minutes of searching the internet I realized that this was nothing new, and that there were already tons of CSS compilers out there that I had just never heard of. Now that I’m using a CSS compiler, I have no idea why more people don’t know about them or use them, because they are totally awesome. The three biggest reasons to use a CSS compiler in my opinion are:

  1. Variables - Good programmers don’t like to hardcode. In many cases you can avoid this in CSS by using good inheritence, but sometimes it’s unavoidable. With variables, changing your color scheme means updating one variable instead of 13 attributes.
  2. Math - This goes hand in hand with variables. Say your left column is 100px, your right column is 500px, and your wrapper div is 600px. Well, maybe you decide to change it to 960px. Wouldn’t it be awesome if the width of your columns adjusted automatically? The answer is yes.
  3. Nested Styles - This is probably the most important. CSS is flat, which means complex sites end up with CSS that is a pain to go through. I’d much rather stare at this beautiful, pythonic, whitespace using code:
    ul#comments, ol#comments:
      margin: 0
      padding: 0
        padding: 0.4em
        margin: 0.8em 0 0.8em
          font-size: 1.2em
          padding: 0.3em
          text-align: right
          color: #ddd

    than this ugly mess:
    ol#comments {
      margin: 0;
      padding: 0;
    ul#comments li,
    ol#comments li {
      padding: 0.4em;
      margin: 0.8em 0 0.8em;
    ul#comments li h3,
    ol#comments li h3 {
      font-size: 1.2em;
    ul#comments li p,
    ol#comments li p {
      padding: 0.3em;
    ul#comments li p.meta,
    ol#comments li p.meta {
      text-align: right;
      color: #dddddd;

If you find the idea of CSS compilers to be intimidating, HSS is a good place to start. It has nested styles and variables, but no math. It also keeps CSS’s bracket {} notation and doesn’t rely on whitespace, unlike Sass and CleverCSS.

If you want a little more power though, head over to Sass or CleverCSS. Sass is in Ruby and CleverCSS is in python. The only major difference between the two is that Sass requires your indents to be 2 spaces, and CleverCSS doesn’t care. This is a big enough difference to cause me to prefer CleverCSS, because everything else I program uses 4 spaces for indentation. However, they both have variables, can do basic math, have nested styles, and utilize whitespace rather than brackets and semicolons. For django-css, it doesn’t really matter which one you use because they can both be called from the command line.

Honestly, I can’t really think of a reason not to use a CSS compiler other than you’re too lazy to port your existing CSS over to a slightly different format. If you’re using Django, you can keep your existing CSS in one file and write your new CSS using CleverCSS or HSS in a different file. Django-css will recognize your existing CSS files and merge/compress all of your CSS together anyway, so it doesn’t really matter how many separate CSS files you have.

EDIT (4/19/09) - I’ve found a couple bugs in CleverCSS, and it doesn’t look like the official version is being maintained, so I’m hosting a patched version here: http://code.google.com/p/django-css/downloads/list

Update: My forked version of CleverCSS is now here: http://github.com/dziegler/clevercss/tree/master with various bug fixes. It will also install a clevercss executible in your path.

Comments (View)

blog comments powered by Disqus
Page 1 of 1