Building and Shipping Functional CSS

From the article, markup that once looked like this:

<div class='questionCard'> <!-- Contents of the card --> </div>

Now looks like this after their refactor:

<div class='u-relative u-mt1 u-p2 v-bg-white v-bs2'> <!-- The contents of the card --> </div>

For a filesize improvement of 19kb to 9kb.

Personally, I feel like the new class names they're using are extremely difficult to read and scan. I imagine the mental parsing time from reading the classes to forming a mental image of the result goes up with the addition of each class and variation. I wonder how difficult it is to discuss design decisions using these terms?

I've found that semantic, component-specific class names make it really easy to reason about markup and discuss UI changes with designers and product people. This increases maintainability and makes it easier to prune classes used by deprecated components, and also decreases iteration time when developing a UI.