There are countless naming schemes for CSS classes. Some are more semantic than others ('focus-area'), some are more descriptive ('big-purple-square'). I'm not going to talk about the difference between them today, instead, I'm going to cover long-vs-short classnames.

If you're working with a team of developers, it's only right that you choose clear variable names. You wouldn't (or at least, shouldn't) have a JS variable c1p when you could have characterFirstPosition, for example. You probably shouldn't do it even if you're just working on your own as there's a fair chance you'll forget what it was you were doing when you come back to it 6 months later.

There's no reason why CSS classnames should be treated any differently.

GZip to the rescue

Pages are delivered using gzip. percentage browsers with gzip accept encoding

For an example, we'll work with the following piece of HTML:

Full HTML (157 bytes)

<p class="awesome-web-frontend-intro">this is introtext</p>
<p class="awesome-web-frontend-content">this is main content</p>
<p>This is a plain paragraph</p>

As you can see, this has very long classnames. When this is processed with gzip, the first thing the algorithm does is identify

(simplified) GZipped HTML (115 bytes)

1:<p class="awesome-web-frontend-
2:intro
3:>this is 
4:</p>
5:content
12"32text4
15"3main 5
<p3a plain paragraph4

Basic:
<p class="awesome-web-frontend-intro">this is introtext</p><p class="awesome-web-frontend-main">this is content</p><p class="awesome-web-frontend-content">this is a plain paragraph</p>

After LZ77:
<p class="awesome-web-frontend-intro">this is introtext</p>(59,31)main(58,10)content(56,4)(115,31)(42,7)(118,10)a plain paragraph(126,4)