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

Code: Use inheritance to eliminate duplicate declarations

From Chapter 7: CSS Optimization

An element inherits the properties of its parent element unless otherwise specified. So, this overdeclared example:

<style type="text/css">
    body{font:1em arial,helvetica,sans-serif;}
    p.normal1em{font:1em arial,helvetica,sans-serif;} /* extra declaration */
    div {font:1em arial,helvetica,sans-serif;} /* another one */
    #content em{color:red;} /* em for emphasis color */
    #content em.ed {color:#00331a;}
</style></head><body>

<div id="content">
    <p class="normal1em">Normal text here, brute forced from the p rule.
    <em class="ed">Editors note: Note that inherited CSS can provide
    this approach more efficiently.</em></p>
</div> </body>

becomes this, by moving the common font declaration up into the body rule and eliminating the p rule and div rules which are implied by inheritance:

<style type="text/css">
<!--
    body{font:1em arial,helvetica,sans-serif;}
    #content em{color:red;} /* em for emphasis color */
    #content em.ed {color:#00331a;}
--></style></head><body>

<div id="content">
    <p>Normal text here, inherited from the body rule.
    <em class="ed">Editors note: Note the inherited style
    that CSS provides with this approach...</em></p>
</div> </body>

The child div and paragraph elements now inherit the same font size and family from the body rule.

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