Last year at Mud we adopted a utility-first approach to CSS (also known as atomic CSS). In this article I’ll summarise what I’ve learnt from adopting atomic CSS in an agency context over the past year, and where it might or might not be appropriate to apply it.

SVG gives us a powerful feature: the ability to manipulate their properties with CSS. Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more.

Single Page Apps are a bit different. Since we’re not relying on the native page load functionality, we’re now in the tricky business of managing focus ourselves. But don’t fret, there are essentially two solutions to help non-sighted or keyboard-only users get to where they’re going: 1) Emulate a native page load and move focus to the top of the document. 2) Move Focus on the content (heading or possibly form control).

Yesterday there was a bit of a heated discussion around a WebKit issue that suggested putting a limit on the amount of JavaScript a website can load. In the issue, Craig Hockenberry makes the case that enforcing a limit on the amount of JavaScript would provide a sort of “meet me in the middle” solution for users currently using content blockers.

Everyone is angry about CSS again. I’m not even going to try to summarize the arguments. However it always seems to boil down to the fact that CSS is simultaneously too easy to bother with, yet so hard it needs to be wrapped up in a ball of JavaScript in case it scares the horses.