IMO that just leads to less reusable CSS and more stylesheet spaghetti. I see a class "clearfix" in HTML and I know what it's doing; I see ".clearfix {" and I know what it's doing; but I look at "article:after, .article:after, .group:after, col-2:after, {" and have to figure out what's going on. In terms of code, I think you should be semantic from a developer's perspective.

To be clear, those are just example class names so you know exactly what element I'm referring to and where it resides in the markup.