When Hampton Catlin first approached Nathan Weizenbaum, his idea was for a HAML for CSS. Much like HTML, standard CSS is full of repetition and the syntax relies on characters like semi-colons ; to separate declarations and curly-brackets { ... } to separate blocks of style rules.
The following example illustrates a common CSS selector with CSS rules. However, unlike HTML, nesting requires duplication of the parent selector(s).
header {
width: 100%;
height: 100px;
}
header .nav { /* header is repeated */
text-decoration: none;
background: #fff;
color: #333;
border-radius: 5px 5px 0 0;
}
header .nav p { /* header and .nav are repeated */
font-weight: bold;
}
I don't know about you, but this repetition was something that always bothered me. Years before I ever encountered Sass I would beg the question, "Why can't I just return+tab?" As it turns out, others were thinking the same thing.
It should be noted, in the same way returns and indentation are best practice for formatting HTML, the same goes for block and declaration separation in CSS.
In the following example I illustrate three styles of CSS, expanded, nested and compact.
/* Expanded */
header {
width: 100%;
height: 100px;
}
header p {
font-size: 48px;
}
/* Nested */
header {
width: 100%;
height: 100px; }
header p {
font-size: 48px; }
/* Compact */
header { width: 100%; height: 100px; }
header p { font-size: 48px; }
Since CSS formatting relies on syntax for block and rule separation, CSS authors are able to use all three styles at the same time in the same document if desired.
In many cases there is a distinct reason why multiple styles are used in a single document. There are also a lot of cases where the code was simply edited by multiple developers who preferred one style over another. Going unchecked, this lack of style enforcement can quickly lead to chaos in the code and makes it almost impossible to maintain. Remember the campfire rule?
Another format style of CSS is compressed. This is typically used for file compression and not a writing style.