My CSS Writing Style

Started on 2009-08-27, updated on 2010-02-28, 2010-05-22, 2010-11-01 and 2011-02-03.

Pick a logical style and stick with it. Any internally coherent system which minimises special cases can be understood and maintained by subsequent coders.

Pretty-Printing

Entire selector uses on one line.
Opening curly brace goes at the end of the selector line, preceeded by one space.
Closing curly brace goes on a line by itself, with no indention.
One property per line, indendented by one space.
Major sections have 3 blank lines before them.
Subsections are continuous, with no blank lines around them.

Sectioning

Comment before each section and subsection.
Subsection for related groups of styles, usually applying to one type of content.
Subsection comments use one hyphen and sub-subsections use two hyphens. Avoid any lower levels.

Section Order

Viewport colours, fonts, spacing, sizing, centering and “sticky footer” techniques.
Main layout.
Small amount of resetting the UA styles.
Section for each top-level HTML container, in source order.

Rule Order

Start at parent, then work down. (Hence html and main layout is first.)
Keep related rules together.
Source order for nearby rulesets.
Alphabetical by the first different element name, id or class.

Property Order

Layout
	Box Type	`display`
	Box Type	`float`
	Size	`margin`
		`padding`
		`width`
		`height`
	Position	`top`
		`left`
		`right`
		`bottom`
		`z-index`
		`position`
	Scrollbars	`overflow`
Formatting
	Text	`color`
		`font`
		`font-weight`
		`font-style`
		`font-variant`
		`font-size`
		`line-height`
		`font-family`
		`text-align`
		`text-indent`
		`text-transform`
		`text-decoration`
		`letter-spacing`
		`word-spacing`
		`word-wrap`
		`white-space`
	Lists	`list-style`
		`list-style-type`
		`list-image`
	Effects	`opacity`
	Effects	`filter`
	Background	`background`
		`background-color`
		`background-image`
		`background-repeat`
		`background-position`
		`background-attachment`
	Border	`border`
		`border-width`
		`border-style`
		`border-color`
		`border-collapse`

4-Sided Shorthand Properties

These can be expanded into 4 single-sided properties. They follow the internal order of the shorthand:

`margin`	`margin`
	`margin-top`
	`margin-left`
	`margin-right`
	`margin-bottom`
padding	`padding`
	`padding-top`
	`padding-left`
	`padding-right`
	`padding-bottom`
border	`border`
	`border-top`
	`border-left`
	`border-right`
	`border-bottom`

Single-sided properties are only used when the 4-sided shorthand would alter sides which are controlled elsewhere in the stylesheet.

Syntax

0 must appear before decimal point for values between 1 and -1, exclusive.
0 values never have a unit.
border: 0 instead of border: none.
Hexadecimal colour codes instead of RGB, keywords or anything else.
3-digit hexadecimal colour codes whenever possible.
1, 2 or 4 values (never 3) in the shorthand for properties with 4 sides.

Other Aspects

Selectors
Special Pages

Techniques

‘Add a float to fix a float’ instead of clearfix or flo.
Re-usable snippets instead of CSS Frameworks.
Over-rule the UA default only when necessary instead of CSS Reset.

Examples

Densely Styled Button in a Column

#content .one p.back {
 display: inline; /* IE6 */
 float: left;
 margin: 0 0 15px 0;
 padding: 6px 0 0 0; /* IE6 */ 
 width: 161px;
 height: 21px;
 bottom: 18px;
 position: absolute;
 color: #fff;
 font-weight: bold;
 font-size: 0.9em; /* 10px -> 9px */
 line-height: 16px;
 text-align: center;
 letter-spacing: 0.111em; /* 9px -> 1px */
 text-transform: uppercase;
 background: transparent url(../images/button-back.gif) right bottom no-repeat;
}