Written by Jakob Løkke Madsen

17. September 2012

Test driven CSS development

I’m a huge fan of test-driven development! Almost every day, I make use of unit tests when writing Javascript. TDD helps me focus my development on singular tasks, and it enables me to easily verify that all my stuff works after refactorings or other kinds of changes.

One day I thought: “Why don’t we have this for CSS?”.

CSS - especially for large projects with many developers - is a major pain! There are no clear-cut rules for modularity, the inheritance mechanisms are obscure, and the runtime environments (the browsers) are still no way near consistent in their interpretations of style rules.

It occurred to me that TDD methodology would be a great way to tackle these problems.

Enter tdcss.js

What I wanted was a way to specify UI elements in an isolated context - similar to the “units” in unit testing, so I could apply my styling and continuously verify that already styled elements still looked like expected. This would also force a modularity focus onto my CSS which is highly desirable when working on big projects.

I won’t go into details about the implementation in this post. Here’s a screenshot of the tdcss test-suite together with the HTML code that generates it.

<!-- # Box styles -->

<!-- : Basic box -->
<div class="box">
    This is a basic box.

<!-- : Notice box -->
<div class="box-notice">
    This is a notice box.

<!-- : Warning box -->
<div class="box-warning">
    This is a warning box.

<!-- : Alert box -->
<div class="box-alert">
    This is an alert box.

<!-- # Typography -->

<!-- : H1 -->
<h1>This is an H1 header.</h1>

<!-- : H2 -->
<h2>This is an H2 header</h2>

<!-- : H3 -->
<h3>This is an H3 header</h3>

<!-- # Custom height -->

<!-- : Some element that needs a lot of space; 700px -->
<h3>This is a test.</h3>

Demo screenshot

Go to for instructions on how to use it. And to download it, of course. :)

comments powered byDisqus