The semantic class name approach to writing CSS leads to the constant need for new CSS. You’ll never stop writing CSS. On the other hand, the functional CSS approach means you will write all the CSS you need, and then you will stop.
15kb of CSS is all you’ll ever need ⚡️
Philip Ardeljan

If my guess is right that .tc stands for text centered, then that’s far more semantically descriptive than .card. A card is a module, and that can have all different kinds of looks. But aligned text is aligned text. And that description does not belong in the class name, because it does not belong in the HTML code.

You didn’t provide any more examples here, but I suspect from your article that you are plastering the HTML code with semantic class names. And that’s horrible practice, because it decreases readability and flexibility in later modifications. If you’re doing that, you could as well go back to B, I and Center HTML elements. Really hope I’m misunderstanding your point, though.

The main reason that Bootstrap is so large is not because of the way it uses classes, but because there’s a lot of overhead, useless “reset” stuff and redundant classes in it. For a while I tried out Yahoo’s Pure framework, which offers grids and all that stuff as well, but is less than 4KB compressed & zipped. I abandoned it in the end because it was difficult to marry with SASS or LESS, but otherwise it was perfectly okay.

Show your support

Clapping shows how much you appreciated Willi Kampmann’s story.