Managing CSS Files - Pro CSS Techniques - page 77

then background, then font styles, and so forth. Others order their properties alphabetically.
The benefit to doing this is that you can easily keep track of which rules have been applied to
avoid duplication. It's a handy trick—if you can keep on top of it.
The vast majority of style sheets on the Web, though, do not have a specific order for indi-
vidual properties. If it helps you to maintain an order, by all means do it. For most of us, it's
probably more trouble than it's worth.
Saving Time with Shorthand
CSS allows for the use of several shorthand properties , a way of combining several properties
into one property/value pair. The advantages of shorthand are the time savings, as well as a very
slight reduction in file size, which saves you a bit of bandwidth and increases the download
speed for your visitors. Some CSS authors find shorthand more difficult to parse when they're
quickly trying to locate and change a single property, and they may accidentally modify some-
thing other than what they intended to change. Others find the shorthand easier to read and
don't seem to have any trouble with editing these properties. Again, you should experiment
and decide whether or not shorthand works for you.
All of the shorthand properties are listed in Appendix A; a few examples follow:
Standard CSS:
border-width: 1px;
border-style: solid;
border-color: #dfdfdf
Shorthand CSS:
border: 1px solid #dfdfdf;
Standard CSS:
background-color: #dfdfdf;
background-image: url('/img/background.png');
background-position: 15px 5px;
background-repeat: repeat-x;
Shorthand CSS:
background: #dfdfdf url('/img/background.png') 15px 5px repeat-x;
Standard CSS:
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;