Yesterday evening, I left my laptop unattended with a stylesheet I’d been playing with open on the screen. This stylesheet is several months old and contains more than 500 lines of code. When I got back to the desk, I must have just saved, closed and moved on with my evening. The problem? Did I mention I have cats?
This morning, when I loaded the page, I realised it was slightly uglier than I remembered. Furthermore, there seemed to be changes in lots of places that just looked less refined than they had before. It irritated me. And my only conclusion is that one of the cats walked over the keyboard. I have seen this happen many times so I know it’s possible.
I have checked over the code by eye and cannot find any of the usual hallmarks of cat footprints in the code. Things like
//////////////////////////////////////////////////........,l,,,,,kkkkkkkk
So what now?
Fixing something like this is difficult by sight. Especially when we consider that some of the divs in play, themselves contain multiple other divs.
This is when I thought about a CSS testing framework. My time at Makers recently has taught me about things like Rspec and Jasmine for Ruby and Javascript. Maybe there’s one for CSS?
A google search uncovered BackstopJS, which I think does exactly this – makes sure CSS requirements remain satisfied when your pesky cat walks across the keyboard and can tell you where in the file the problems are when they don’t.
I may write more about this as I figure out how to use it.
Copyright 2021. All Rights Reserved. Adam Patel