[klum]

I'd say the class name can be semantic whether it's semantic with regards to the components function, its form or something else. It's not self-evident to me that a name given to something in order to affect its form should be semantic with regards to its function, not its form.

As I understand utility-first CSS, changing the classes as in your example is very much what you might do. Why would this make sense? Because the situation where we want to "change how this component looks in the sidebar, but keep it the same as before in the footer", or "show this component slightly differently in a new context, without changing its appearance in its old contexts" is much more common than the situation where we want to change the look of a component everywhere it appears. In this case, utility-first CSS makes it very easy to make all these small, "one-off" changes.