HTML and CSS Reference
In-Depth Information
Formatting CSS Declarations
Formatting what comes in between those brackets is perhaps even more important than any
class
and
id
outside them. There are countless ways of formatting your CSS files, and it's
important for you to adopt a process that will provide a style sheet that is easy to read, inter-
pret, and edit—both by you and other members of your team.
One Line vs. One Property Per Line
Because CSS itself doesn't care how whitespace is used in style sheets, it's up to CSS authors to
determine what works best for them. Some designers prefer to list all of the properties and val-
ues for each selector on one line, while others favor a vertical, one-property-per-line approach.
The following CSS declarations are functionally equivalent:
#footer {
clear: both;
height: 204px;
margin: 0 auto;
padding: 26px 20px 20px;
}
#footer { clear: both; height: 204px; margin: 0 auto; padding: 26px 20px 20px; }
Most people immediately find one or the other of these styles to be considerably more read-
able and manageable. Some believe it's easier to quickly scan through one style, and some think
the other style makes the CSS more easily parsable. The majority of web designers and developers
use one style or the other, although there are some who mix them—typically using the single-
line approach for shorter declarations and the vertical method for longer ones. As with most of
file-management issues, which you choose isn't as important as picking a style and then sticking
to it. You'll want to figure out which method is simpler for your team and roll with it.
There are a few real practical benefits to each method, though. Most syntax validators you
use on your CSS code will reference line numbers when they find errors. If you have used a one-
property-per-line coding style, that line number will translate directly to a single property that
is in error. If you're using multiple properties per line, it may not be as simple to find the error
that the validator is referring to. On the other hand, the multiple-properties-per-line method
results in much shorter files, which have a smaller file size. This translates to saved bandwidth,
which means faster downloading for the end user and saved money on your hosting bill.
■
Note
You'll have probably noticed that we've used the one property per line style throughout this topic.
This is because we want to make it as easy as possible for you to follow along with the examples.
Beyond Organized: Ordering Your Properties
Some CSS authors meticulously order the individual properties within each CSS rule (although
probably only a handful of CSS developers and designers are organized enough to maintain it!).
Some adopt a particular order that “fits their brain,” such as margin, then padding, then border,
