Skip to content

Instantly share code, notes, and snippets.

@mrcgrtz

mrcgrtz/order.css

Created April 18, 2011 10:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mrcgrtz/925112 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mrcgrtz/925112 to your computer and use it in GitHub Desktop.
Download ZIP
My preferred CSS property order.
Raw
order.css
selector {
/* display and flow */
display: value;
visibility: value;
float: value;
clear: value;
/* positioning */
position: value;
top: value;
right: value;
bottom: value;
left: value;
z-index: value;
/* box behavior */
transform: value;
box-shadow: value;
box-sizing: value;
box-orient: value;
box-align: value;
box-direction: value;
box-pack: value;
box-lines: value;
box-line-progression: value;
box-flex: value;
box-ordinal-group: value;
/* dimensions */
min-width: value;
max-width: value;
width: value;
min-height: value;
max-height: value;
height: value;
clip: value;
overflow-x: value;
overflow-y: value;
overflow: value;
/* margins, padding, borders and outlines */
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;
margin: value;
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
padding: value;
border-top-width: value;
border-top-style: value;
border-top-color: value;
border-top: value;
border-right-width: value;
border-right-style: value;
border-right-color: value;
border-right: value;
border-bottom-width: value;
border-bottom-style: value;
border-bottom-color: value;
border-bottom: value;
border-left-width: value;
border-left-style: value;
border-left-color: value;
border-left: value;
border-width: value;
border-style: value;
border-color: value;
border: value;
border-top-left-radius: value;
border-top-right-radius: value;
border-bottom-right-radius: value;
border-bottom-left-radius: value;
border-radius: value;
border-image-source: value;
border-image-slice: value;
border-image-width: value;
border-image-outset: value;
border-image-repeat: value;
border-image: value;
border-collapse: value;
border-spacing: value;
outline-top-width: value;
outline-top-style: value;
outline-top-color: value;
outline-top: value;
outline-right-width: value;
outline-right-style: value;
outline-right-color: value;
outline-right: value;
outline-bottom-width: value;
outline-bottom-style: value;
outline-bottom-color: value;
outline-bottom: value;
outline-left-width: value;
outline-left-style: value;
outline-left-color: value;
outline-left: value;
outline-width: value;
outline-style: value;
outline-color: value;
outline: value;
outline-top-left-radius: value;
outline-top-right-radius: value;
outline-bottom-right-radius: value;
outline-bottom-left-radius: value;
outline-radius: value;
outline-offset: value;
/* grid */
grid-columns: value;
grid-rows: value;
grid-column-align: value;
grid-row-align: value;
grid-column-span: value;
grid-row-span: value;
grid-layer: value;
/* columns */
column-width: value;
column-count: value;
columns: value;
column-rule-width: value;
column-rule-style: value;
column-rule-color: value;
column-rule: value;
column-gap: value;
column-span: value;
column-fill: value;
break-before: value;
break-after: value;
break-inside: value;
/* colors and backgrounds */
color: value;
background-color: value;
background-image: value;
background-repeat: value;
background-attachment: value;
background-position: value;
background-size: value;
background-clip: value;
background-origin: value;
background: value;
opacity: value;
/* typography */
font-family: value;
font-size: value;
font-size-adjust: value;
font-weight: value;
font-style: value;
font-variant: value;
font-stretch: value;
font: value;
line-height: value;
letter-spacing: value;
word-spacing: value;
vertical-align: value;
text-align: value;
text-decoration: value;
text-indent: value;
text-transform: value;
text-shadow: value;
text-rendering: value;
white-space: value;
word-wrap: value;
hyphens: value;
orphans: value;
widows: value;
/* text direction */
direction: value;
unicode-bidi: value;
/* lists */
list-style-type: value;
list-style-position: value;
list-style-image: value;
list-style: value;
/* tables */
table-layout: value;
caption-side: value;
empty-cells: value;
/* images */
image-rendering: value;
image-region: value;
/* generated content */
content: value;
quotes: value;
counter-increment: value;
counter-reset: value;
/* animation */
animation-delay: value;
animation-direction: value;
animation-duration: value;
animation-fill-mode: value;
animation-iteration-count: value;
animation-name: value;
animation-play-state: value;
animation-timing-function: value;
animation: value;
/* general appearance */
cursor: value;
pointer-events: value;
transition-property: value;
transition-duration: value;
transition-timing-function: value;
transition-delay: value;
transition: value;
appearance: value;
resize: value;
filter: value;
zoom: value;
/* printing appearance */
size: value;
page-break-before: value;
page-break-after: value;
page-break-inside: value;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment