I was looking at django-css, a project which would integrate CSS compilation into my Django projects, and it mentioned 4 popular languages: HSS, Sass, CleverCSS, and LESS.

Here’s a spreadsheet comparing the features:

Popularity
I think SASS is by far the most popular. I’m secretly rooting for it, since it’s probably in higher demand and would therefore be a more valuable skill to have, though it would be awkward introducing Ruby dependencies in a Python project.

Inheritance
The main reason I want to use a CSS meta language is for the inheritance. When looking at the documentation for CleverCSS I couldn’t see any inheritance implementation, which is a shame because it’s the only one implemented in Python and would’ve been easier to integrate into my Django project.

HASS example:

var nomargin = { margin : 0px; padding : 0px; }

pre {
    $nomargin;
    color : #FF0000;

}

The inherited styles can’t be a normal CSS class, so this can’t be used to inherit classes from a CSS framework.

SASS Mixin example:

@mixin table-base {
  th {
    text-align: center;

    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

The inherited definition needs to be declared as a mixin, and I’d rather not modify any CSS frameworks. There is a project called Compass that provides CSS frameworks rewritten in SASS, but I’d rather not add yet another dependency into my project, especially a Ruby one (nothing against Ruby, it’s just undesirable within the context of a Python project).

SASS Inheritance example:

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;

  border-width: 3px;
}

Just what I want, but it generates more code than needed:

/* CSS */

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,

.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

LESS example:

.bordered {
  border-top: dotted 1px black;

  border-bottom: solid 2px black;
}

#menu a {
  color: #111;

  .bordered;
}
.post a {
  color: red;
  .bordered;
}

Generates:

#menu a {
  color: #111;
  border-top: dotted 1px black;

  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;

  border-bottom: solid 2px black;
}

Exactly what I need. The documentation says, “Any CSS class, id or element ruleset can be mixed-in that way.” And since it’s written in JavaScript, you can load your LESS files and compile them on the client side, which should make designing and debugging a lot easier. LESS best suits my needs, so it’s the one I’ll be going with.

Update: It turns out LESS doesn’t eliminate the inherited classes, they’re still present in the output. Even so, I still think it best suits my needs.

Update 2: It looks like django-css isn’t being maintained, so you should probably use django_compressor.

• using version control
• using a bug tracker
• writing unit tests
• using a programming framework

In all honesty, I didn’t do any of these before my current job at Govnex (aside from a little dabbling with CakePHP), nobody at my first 2 web development jobs did any of these, and we didn’t learn about any of this stuff in college. As far as I know, nobody I knew at RIT followed these practices except for maybe using a framework. Of all the job descriptions I’ve read in the past few years, only a handful mentioned using a framework, and only a couple mentioned anything about unit tests or version control; none of them mentioned the use of bug tracking software. One of my colleagues said that these practices are common among all developers, while my other colleague agreed with me that they’re hard to find.

What do you think? I’ve created a 6 question Google Apps form for collecting survey data and made the results public, it would be a big help if you could fill it out. Afterwards, please share your comments below.