CSS Unit Testing

A few quick searches discovered that I'm obviously not the first person to have the thought "Can I unit test my CSS?".

I'm wondering if anyone here has taken on CSS Unit Testing successfully? If you've tried and failed, or just have your own theories, please tell me why it (apparently) hasn't been done yet?

Solution 1:

You could use Selenium, which is a web testing framework. This way you could assert what styles are to be applied to elements in the DOM etc.

Selenium

Otherwise, not sure what your aim is. Unit testing is, as the name suggests, testing 'Units', and to me, this only makes sense with code, not css.

Solution 2:

There is a new css unit testing library called Quixote. Rather than comparing images visually, it looks at the code. Unlike Selenium, you don't have to assert specific styles, instead you can say something like "it should be centered" or "the left side should be 10px farther to the right of this other element".

Solution 3:

I don't understand why we couldn't or shouldn't unit test CSS. Here's the scenario I have in mind :

I have a CSS framework that is made of multiple modular CSS files and that drive 5 of my sites.

Ex : base.css / form.css / article.css etc.

Imagine I make a change to base.css for a requirement applying to Site #1 only => I may break Site #2 styling without.

CSS unit test would be even more pertinent if my CSS framework is build on top of LESS or SASS : a change in a macro could break all the styling. .