When I write CSS I generally favor clarity over brevity when choosing the way I name classes/components. I will admit that this can make for some pretty long class names and can look a little weird if you’re using a naming convention like BEM.
<div class="profile profile--compact"><div class="profile__image profile__image--large"><img src="pat/to/image"></div><div class="profile__bio"><!-- Profile content --></div></div>
To me those class names are perfectly descriptive and easy to remember, especially after six months away from a project when I have to come back and work on this code. Yes, class names like this cause a few extra keystrokes for developers, but I tend to feel the extra effort is worth it. Also, we have great tools that do things like auto-complete class names for us.
Recently, a couple of developers have tried to make the argument to me that long class names make the HTML sent over the network larger in file size and therefore slower. What this argument really boils down to is prioritizing convenience and developer experience over clarity and maintainability.