Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!


Click here to return to the 'Efficient CSS with grouping and shorthand' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Efficient CSS with grouping and shorthand
Authored by: danielmark on Jun 01, '05 01:09:53PM

If all of the declarations are identical, you can group the selectors using the comma operator. Also, you could try shorthand declarations, remembering the clockwise spatial order: top right bottom left (or TRBL, "terrible" mnemonic). Note the even lazier padding declaration, which takes advantage of the "repetition" effect; that is, if opposite sides are the same (top and bottom, left and right), you can omit the second width.

Cleaner, more efficient code results. One of the hallmarks of web standards, even. For example:

.articlebody div.blockquote, 
.articlebody blockquote, 
.articlebody dd {
    margin: 0.5em 0 0.5em 3em;
    padding: 0.25em 1em;
    background-color: #EEE;
}



[ Reply to This | # ]