CSS Development & Testing Tools

We’re building bigger websites and applications than ever before. With this, we’re also building more modular websites and applications than ever before. They way we approach architecting our CSS today is miles different than how we would have approached it years ago. Methodologies like Object-Oriented CSS (OOCC) and Scalable and Modular Architecture for CSS (SMACSS) have changed the game, and for good reason. Our code bases are more performant, scalable, and place maintainability at the forefront.

As these changes have been adopted by the community we’ve seen a handful of tools appear. Particularly, tools to help us identify and remove unused and repetitive CSS. Along with these tools are frameworks to perform regression testing on our CSS, identifying any unwarranted changes in our designs.

The following are some tools I’ve found useful, as well as some that I’m yet to use but are on my radar.

Removing Unused & Repetitive CSS

CSS Lint

CSS Lint is the bee’s knees as far as CSS testing goes, pointing out problematic patterns and inefficiencies upon scanning your code. Depending on your environment there are a handful of command line utilities to help get CSS Lint running, as well as a Sublime Text plugin.

UnCSS

Available as a command line utility, a Grunt task, or a Gulp task, UnCSS works across multiple stylesheets to remove any unused CSS.

uCSS

Coming from the team at Opera, uCSS is a Node package that can be used a library or command line utility to crawl code bases, locating unused and duplicate selectors.

CSSCSS

CSSCSS is a Ruby gem that identifies duplicate declarations within different rulesets. One perk to CSSCSS is it’s support for Sass and LESS, as well as a community extension for Compass.

CSS Regression Testing

Regression testing within CSS revolves around taking a screenshot of a page before a change and then again after a change. Those two screenshots are then compared against one another with any differences being called to attention. With an array of different browsers and rendering engines, current practices for CSS regression testing aren’t perfect, and results may vary from browser to browser.

That said, the majority of CSS regression testing frameworks are built by different companies, and team members at those companies, for their specific use. Fortunately some of these frameworks have been open sourced for us to use as well.

Huxley

Huxley, built by Pete Hunt at Facebook, watches your browser, takes screenshots of pages, and let’s you know when the design changes.

Wraith

The developers at BBC News created Wraith, a Ruby gem which takes two screenshots and displays the difference between them, highlighting any affected areas.

CSS Critic

ThoughtWorks regression testing tool, CSS Critic, maintained by Christoph Burgmer, checks your currently layout consistency against a reference image within Firefox, pointing out any discrepancies.

If you’re interested in learning more, csste.st has put together a comprehensive list CSS testing tools and an introduction on how to get started with each tool.

Overall I’ve used a few different tools to remove unused and repetitive CSS but I haven’t dug into too many regression testing tools. How about you, what are your CSS testing tools of choice? Do you prefer one over the other? Are there others we should be aware of?

Ask a question or share this article, we’d love to hear from you!