CSS Property Ordering Guide

View/download.

This is my personally preferred method for ordering CSS properties within a given declaration block.

el {
	display: ;
	visibility: ;
	float: ;
	clear: ;
 
	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;
 
	width: ;
	min-width: ;
	max-width: ;
	height: ;
	min-height: ;
	max-height: ;
	overflow: ;
 
	margin: ;
	margin-top: ;
	margin-right: ;
	margin-bottom: ;
	margin-left: ;
 
	padding: ;
	padding-top: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: ;
 
	border: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;
 
	border-width: ;
	border-top-width: ;
	border-right-width: ;
	border-bottom-width: ;
	border-left-width: ;
 
	border-style: ;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;
 
	border-color: ;
	border-top-color: ;
	border-right-color: ;
	border-bottom-color: ;
	border-left-color: ;
 
	outline: ;
 
	list-style: ;
 
	table-layout: ;
	caption-side: ;
	border-collapse: ;
	border-spacing: ;
	empty-cells: ;
 
	font: ;
	font-family: ;
	font-size: ;
	line-height: ;
	font-weight: ;
	text-align: ;
	text-indent: ;
	text-transform: ;
	text-decoration: ;
	letter-spacing: ;
	word-spacing: ;
	white-space: ;
	vertical-align: ;
	color: ;
 
	background: ;
	background-color: ;
	background-image: ;
	background-repeat: ;
	background-position: ;
 
	opacity: ;
 
	cursor: ;
 
	content: ;
	quotes: ;
	}

Comments & More Info

Read more about the method behind the madness and/or leave a comment here.