Test driven CSS development
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.
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. </div> <!-- : Notice box --> <div class="box-notice"> This is a notice box. </div> <!-- : Warning box --> <div class="box-warning"> This is a warning box. </div> <!-- : Alert box --> <div class="box-alert"> This is an alert box. </div> <!-- # 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>
Go to https://github.com/jakobloekke/tdcss.js for instructions on how to use it. And to download it, of course. :)