Call (877) SITE-OPT (748-3678)

Code: Abbreviate long class and ID names

From Chapter 7: CSS Optimization

Verbosity is a virtue in some programming circles, but not when you craft CSS. Long class names may be more easily understood by subsequent designers, but your users must download those extra bytes (at least the first time they load the CSS file). So, this:

#content .textadvertisingrectangle{text-align:center;}

becomes this, after some class name abbreviation:

#content .textadbox{text-align:center;}

At the extreme end, you could "pull a Yahoo!" by using one- or two-letter class names, like this:

#c .ta{text-align:center;}

Be sure to watch out for namespace collisions when you do this for more complex applications with layered stylesheets.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In