My CSS Writing Style
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 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.
- Each section is named with a 1-line comment.
- Major section names have 5 blank lines before and after.
- Section names have 3 blank lines before and 0 after.
- Subsection names have at most 1 blank line before and 0 after.
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.
- Sub-sections for logical groups of styles and selectors within each section.
Rule Order
- Start at parent, then work down. (Hence
html
and main layout is first.) - Keep related rules together.
- Source order for nearby rulesets.
- Where source order varies, choose most common order or go alphabetical by the first different element name,
id
orclass
.
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
- 1, 2 or 4 values (never 3) in the 4-sided shorthand properties.
0
must appear before decimal point for values between1
and-1
, exclusive.0
values never have a unit.border: 0
instead ofborder: none
.- Hexadecimal colour codes instead of RGB, HSL or keywords.
- RGBa instead of HSLa.
- 3-digit hexadecimal colour codes whenever possible.
Other Aspects
- Selectors
- Special Pages
Techniques
- ‘Add a
float
to fix afloat
’ instead ofclearfix
orflo
. - 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;
letter-spacing: 0.111em; /* 9px -> 1px */
text-align: center;
text-transform: uppercase;
background: transparent url(../images/button-back.gif) right bottom no-repeat;
}