A great practice for CSS is to group CSS classes/IDs together and list out common attributes only once. This streamlines your CSS code and makes for easier maintenance. For example if you have 5 classes/IDs that share the same font attributes, list the 5 classes/IDs together separated by commas with the attributes listed once instead of listing everything out 5 separate times. If the class/ID has additional style attributes it needs, just list the class/ID name out again with the unique attributes. For example:
/* Attributes for all boxes */
td.Box1, td.Box2, td.Box3 {padding: 3px 6px; font-weight: bold}
/* Unique box attributes */
td.Box1 {background: #fff}
td.Box2 {background: #000}
td.Box3 {background: #ccc}
You can really use this practice to your advantage to easily change out skins for sites. In your master style sheet you can list out all classes/IDs with the default skin, and in the skin style sheet you can group classes/IDs together that need the same color/image change and only specify the overriding attribute once. For example:
Master Style Sheet:
td.Box1 {border: #000; font: italic; background: #9900CC; padding: 3px}
tr.Header {background: #9900CC; font-weight: bold; font-size: 18px}
div.bkgd {background: #9900CC; position: absolute; top: 40px; left: 80px}
Skin Style Sheet (used in conjunction with the Master, but called after the Master so attributes will override):
td.Box1, tr.Header, div.bkgd {background: #336633}
Grouping classes and IDs is a great practice that I think is often underutilized. Use and abuse it! It is a very handy method to handle style sheet attributes.
