TDD in CSS – fad or reality?
Do you test-drive your CSS code? What has been your long experience in this? Was this concept of test-driving CSS, an experiment of the past?
Look for particular expectations being met in the browser?
As a lot of the general TDD stuff I'd say it's a bad idea.
It gives you nothing extra of value.
Instead you end up multiplying the number of times you declare/define/write something.
I consider this kind of stuff feel good busy work. You want to brag about your CSS test coverage (?!) but you are just wasting time and picking up complexity.
Tests at this level of granularity are just not worth it.
What's next TDD your TDD?
- The number of columns in the article is 1 on mobile.
- On desktop, the sidebar is to the left of the article.
- There is no horizontal scrolling.
- All paragraphs have a line height equal to the baseline.
- All elements are vertically aligned on the baseline grid (the "vertical rhythm" property).
- All sidebar icons are 1rem squares.
I want to take high level desired properties, specify them as assertions, and then use that to continuously check that the assumptions still hold, especially as I change the code, or switch devices, etc.
We seem to need this for CSS styling, because as soon as your website or app reaches a threshold of complexity -- a very low threshold, in my experience -- it starts to happen very easily that a seemingly innocent new stylesheet rule has some detrimental "action at a distance"... it's right there in the name, "cascading".
You might be thinking that you can get around this problem through proper abstraction, and I'm interested to hear about that too -- anything that can structurally improve stylesheet quality is urgently necessary. I note that CSS variables are still experimental technology, and that from what I've seen, various CSS preprocessing technologies mostly increase the need for verification (maybe because they tend to encourage even more complex forms of cascading).
In practice, for most projects, I would end up conceding that we can't test our CSS beyond things like screenshot diffing (which is a pretty nice technique), just because it would probably require some "original research" into specifying stylesheets.
Maybe Google or Facebook could sponsor it. They're both producing frontend development resources because they want web developers to succeed in making cool stuff that they can link to (and surveil).
Is there an academic clique somewhere with an interest in formal methods for stylesheets? Or a startup?
It seems interdisciplinary enough to be cool, right?
It shows up as a check on every merge request we have from develop->master, and any visual differences get a manual check. It works great, even on large refactors!
Simply put, I'm as naive as you're and thus helpless. Sorry! :(
* Galen: http://slides.com/netzartist-de/galen-tdd-css * Quixote: https://github.com/jamesshore/quixote
It does sound interesting to me (well testing with good coverage on appropriate elements, rather than 'TDD' per se), but I've never had a chance to get it running on a project. It feels like the type of thing you'd need to do from the beginning if at all.
Could be useful especially around 'baseline' things on the site, that you're not expecting to change, e.g. do font-sizes, block-level padding, grid alignment, brand colours, etc.
EDIT:
Just to add, so I think the basic premise of this type of visual testing is that you're testing imperatively (i.e. "when I'm on the homepage, the navigation should be flush to the top of the screen and should have a 100px gap between it and the primary header") vs using something like Wraith where you're testing declaratively (here is a screenshot of the homepage; the actual homepage should look exactly like this ±5% variance).
It's roughly equivalent to integration tests (how does my nav 'integrate with' the Window, the header, etc.) vs functional end-to-end tests (does the homepage as a whole work). Given your point of view, that can either give great savings in debugging things (as you've more specificity about what has changed that caused your funky layout) or could be a complete waste of effort. The answer is probably somewhere in between :)
I would be interested to hear if there's anyone using a CSS test framework like Cucumber/BDD style tests — as the Galen slides above mention, your designer is probably subconsciously checking things on the page, but they're being exact about it — if we could distill that precision into BDD tests and allow our test framework building blocks to grow over time, would you be able to create a suite of reusable test statements that can be written up by design by themselves?