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

Code: Use semantically meaningful names

From Chapter 7: CSS Optimization

Whenever possible, use class and ID names that are semantically meaningful and search-friendly. For example:

<style type="text/css">
<!--
    .box {border:1px solid #000;}
    .bio h2, .bio h3 {color: #c00;background:#0cc;}
    .testimonial h2, .testimonial h3 {color: #0c0; background:#c0c;}
--></style></head><body>

<div class="box bio">
    <h2>Our Staff Bios</h2>
    <div>
        <h3>Barack Obama</h3>
        <p>Senator Obama ran for president in 2008...</p>
        <h3>Albert Gore</h3>
        <p>Vice President Gore raised awareness of global warming ...</p>
    </div>
</div>
<div class="box testimonial">...</div>

This way, you need to change only the class name in the div, which uses multiple classes, to achieve a different look. The bio class would have one look and the testimonial class would have another.

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