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)