When I learned HTML there were no style sheets. Tags such as <b> <u> and <i> were common. <hx> tags were used to get a size you wanted.
Then came CSS. HTML markup could become purely semantic. Now we could use <hx> to provide semantic information and leave formatting to the CSS.
HTML for Semantics; CSS for :Formatting. Simple and clear.
But what if you had information paragraphs and call to action paragraphs. You couldn’t just use a plain <p> tag for both. For that, I was taught (if no suitable tag was available) to use classes:
<p class=information> and <p class=call_to_action>.
Clear add additional semantic nuance o the markup. A reader of the HTML knows what the text is for,
BUT, Oh no! Utility classes
<p class=”style_italic size_500 weight_800″> and these classes are defined in CSS to do what the name implies they do. The semantic information has been discarded for some unfathomable advantage.
Utility classes are anathema. Keep the damn formatting in the CSS where it belongs and stop bleeding it into the HTML!