My CSS Writing Style

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

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

Sectioning

Section Order

  1. Viewport colours, fonts, spacing, sizing, centering and “sticky footer” techniques.
  2. Main layout.
  3. Small amount of resetting the UA styles.
  4. Section for each top-level HTML container, in source order.
  5. Sub-sections for logical groups of styles and selectors within each section.

Rule Order

  1. Start at parent, then work down. (Hence html and main layout is first.)
  2. Keep related rules together.
  3. Source order for nearby rulesets.
  4. Where source order varies, choose most common order or go alphabetical by the first different element name, id or class.

Property Order

Layout Box Type display
float
Size margin
padding
width
min-width
max-width
height
min-height
max-height
Position top
left
right
bottom
position
z-index
Scrollbars overflow
Text text-align
text-indent
word-wrap
white-space
Text Font color
font
font-weight
font-style
font-variant
font-size
font-family
Spacing line-height
letter-spacing
word-spacing
Decoration text-decoration
text-transform
text-shadow
Lists list-style
list-image
Decoration Background background
background-color
background-image
background-position
background-repeat
background-attachment
background-size
Effects opacity
filter
Border border
border-width
border-style
border-color
border-radius
border-collapse
Outline outline
Shadow box-shadow
Animation Transform transform

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

Other Aspects

Techniques

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;
 letter-spacing: 0.111em; /* 9px -> 1px */
 text-align: center;
 text-transform: uppercase;
 background: transparent url(../images/button-back.gif) right bottom no-repeat;
}