Skip to content

Instantly share code, notes, and snippets.

@kvlsrg
Last active April 22, 2017 07:13
Show Gist options
  • Select an option

  • Save kvlsrg/69759090eb49f83943dee857db23b59a to your computer and use it in GitHub Desktop.

Select an option

Save kvlsrg/69759090eb49f83943dee857db23b59a to your computer and use it in GitHub Desktop.
CSS Property Ordering

CSS Property Ordering

Table of Contents

  1. BOX
  1. TEXT
  1. ANIMATION
  2. OTHER

1. BOX

Visibility

// If the element is hidden initially, display those properties first
display: none;
visibility: hidden;
opacity: 0;

visibility
overflow
opacity
backface-visibility
clip

Position

// Position and relativity
position
z-index
float
clear

Box Model

// Element structure
box-sizing
display

// Flexbox
flex-flow
  * flex-direction
  * flex-wrap
justify-content
align-items
align-content

// Flexbox (self)
order
align-self
flex
  * flex-grow
  * flex-shrink
  * flex-basis

// Element size
max-width
max-height
min-width
min-height
width
height
top
right
bottom
left
margin // TRBL order
padding // TRBL order

Element-specific Properties

list-style // For ul, ol, li
border-collapse // For table, tr, td, etc.
resize // For textarea

Decoration

background
  * background-color
  * background-image
  * background-position
  * background-size
  * background-repeat
filter
border
  * border-width
  * border-style
  * borer-color
  * border-radius
box-shadow
outline
  * outline-width
  * outline-style
  * outline-color
  * outline-offset
transform

2. TEXT

Font Properties

font-family
font-size
font-weight
font-style
color
line-height

Text Properties

text-align
text-decoration
text-overflow
text-transform
text-indent
text-shadow
word-spacing
word-wrap
overflow-wrap
content
vertical-align
letter-spacing
white-space

3. ANIMATION

animation
  * animation-name
  * animation-duration
  * animation-play-state
  * animation-timing-function
  * animation-delay
  * animation-iteration-count
  * animation-direction
transition
  * transition-property
  * transition-duration
  * transition-timing-function
  * transition-delay

4. OTHER

// Basic user interaction
cursor

// Browser-specific properties & hacks
background-color: #999 \9;
zoom
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment