
Building and Shipping Functional CSS - cjcenizal
https://blog.colepeters.com/building-and-shipping-functional-css/
======
cjcenizal
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.

