UI Unit Tests via CSS: Automatically catch errors in your code, in production

How would you like it if your website automatically reported HTML inconsistencies to you? Forgot to add a class or added a typo? You can now catch it all.

I have been using CSS Wizardry Grid by the Harry Roberts for some projects. Like every other framework out there, it users certain markup boilerplates to achieve the desired results. A typical boilerplate would be along the lines of:

<div class="grid">
  <div class="grid__item  one-half">
    This grid cell takes up half the width
  </div>
</div>

The grid layout stipulates that:

• A grid must contain grid__item’s as it’s immediate descendent and nothing else.
• A grid__item can only be used directly below a grid.

On seldom occasion developers often violate these sort of rules due to human error. A typo, a missing classname, an incorrect for-loop generating dynamic markup, etc.

Catching Errors

All you need is an appropriately named stylesheet such as ui-testing.css with the following:

/* THIS WILL CATCH ALL GRID__ITEM's WITHOUT GRID */
.grid__item {
  outline: 3px solid red;
}
.grid > .grid__item {
  outline: none;
}
/* THIS WILL CATCH ALL GRID's WITHOUT IMMEDIATE GRID__ITEM */ 
.grid > :not(.grid__item) {
  outline: 3px solid red;
}

That’s it! Now if you have a page with incorrect nesting, this test stylesheet will highlight those errors for you using red outlines.

The box with the red outline has incorrect markup and needs to be fixed.

Outlines as opposed to border don’t mess with the box-model so they are quite useful in this case in highlighting errors without introducing new layout errors.

Automatically Aggregating Errors

All this is good but it still requires that developers load all the pages in their browser and scan for red lines. It would be nice to push these out to production but that would ruin the UX for users. Even so, there’s no guarantee the users will report these errors back the development team.

With a little bit of Javascript magic, we can test this out in production, collect free reports and still keep the UX completely unhindered. This is still a work in progress but the basic premise is that you could add something like:

.grid__item {
  outline: 3px solid transparent;
}
.grid > .grid__item {
  outline: none;
}

Then write Javascript to find elements with a 3px transparent outline. Once found, you could make a request to the http://myserver.com/css-error-reporting/?refer=$url and log the error on your server with the page and any other debug info where the error occurred.

Conclusion

I am hoping Bootstrap and other frameworks adopt this idea and start publishing stylesheets for testing. Even turning these stylesheets on in production for a day would be enough to aggregate a lot of errors and go back and fix them.

This is not the only way to catch these errors. It is also possible to do this via a headless JS engine that crawls all your pages and queries rendered DOM tree to find errors. However, this is a bit more work to setup.

Hopefully if the major frameworks started including similar test stylesheets, developers could enable them on their dev environments and achieve higher quality with zero additional effort.