Css Tutorial : Indenting for Clarity

Further to sensible commenting and flags, responsible CSS developers can make their style
sheets even more legible. The following example makes use of comments and flags, but also
aims to make the layout even more legible using white space:
/* =p Default styling for paragraphs
-------------------------------------------------------- */
p {
color: #F00;
font-size: 12px;
}
/* =h1 Make all top-level headings gray and 16px high
--------------------------------------------------------------*/
h1 {
color: #333;
font-size: 16px;
}
For the purposes of this book, I’m using two-space indents for the selector and four-space
indents for the declarations. Indenting is used to provide clarity. In the real world (or your
favorite text editor, to be precise), many developers use one tab click to indent the selector, and
two tab clicks to indent the declarations and closing curly brace. This might seem arbitrary, but
such a layout makes regular searching for rules a whole lot easier. The eye can scan immediate
left for comments, next right for the selectors, and farthest right for the rules.
Embracing such methods at this stage is not essential, but doing so will certainly help
you stay focused and avoid confusion as your style sheets begin to grow. Very few developers
consider these methods as they begin to learn CSS, but thinking and coding logically from day
one are two of the things that separate a great CSS designer from an average one.