Inline styling via classes is just as bad

Something that has really started to bug me about frontend development recently is how it seems so common to stick a class on something that only applies one style. For example

<p class="bold">This is some important text</p>

and then

.bold {
    font-weight: bold;
}

As far as I can tell that’s no better than just using an inline style

<p style="font-weight: bold">This is some important text</p>

For some reason only the second example seems to invoke the strange mix of cringe and joy we get from looking at terrible code.

The class .bold does not mean anything, all it does is make the text bold – it’s name and result are the same thing. You could argue that using a class like this allows you to change all the places it’s used in one go with ease, you’d be right.

.bold {
    text-docoration: underline;
}

Even more bizarre!

I know my humble blog has no influence but please, for the love of something meaningful to you Dear Reader, try to think of names that describe the thing and not what you want to happen to it – like .important.

End rant.