UI Tests via CSS

[aleemb]

I am not sure if this is common practise or not but some of our developers ended up creating .grid__item without a .grid or incorrect nesting. I came up with an idea for a system for catching these through a test stylesheet along the lines of:

/* grid__item should always be within a grid */
.grid__item {
    outline: 5px solid red;
}
.grid > .grid__item {
    outline: none;
}

/* grid should only have grid__item as children */
.grid > :not(.grid__item) {
    outline: 5px solid red;
}

I am pretty sure this idea can be extended to other rules to allow developers to visually validate markup. It helped me catch a bunch of errors, especially when markup is being dynamically generated, nested or refactored.

What do you think?

[unwiredbrain]

Interesting idea. I'd move it to a debug version though (something like csswizardry-grids.debug.scss) so not to mess up with the production version.

[aleemb]

@unwiredbrain yeah this should not make it's way into production for obvious reasons lest your users see red lines.

Building on the general idea, if you wanted, you could styles such as :after { content:'fail', display: 'none'; } and then write a JS stub. The JS stub could notify you via console.log or even send HTTP requests to example.com/css-errors so you can automatically collect CSS bugs in the wild. That would be pretty sweet actually. Not proposing that for CSS Wizardry, but more of a cool trick for automated CSS testing.

EDIT: Posted here https://medium.com/@aleemb/ui-unit-tests-via-css-automatically-catch-errors-in-your-code-in-production-6f75826ec170