新規でCSS設計を行う場合、スタイルプロパティの記述順は以下のように記述します。規則性を保つことでコードの可読性の向上を目指していきます。

配置

display
flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content
order
flex
flex-basis
flex-grow
flex-shrink
flex-basis
align-self
box-sizing
box-shadow
position
top
right
bottom
left
z-index
float
clear
width
min-width
max-width
height
min-height
max-height
vertical-align
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left

リスト

list-style
list-style-type
list-style-image
list-style-position

ボーダー

border
border-width
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-radius

背景

background
background-color
background-image
background-repeat
background-attachment
background-position
background-size

テキスト

color
font
font-family
font-style
font-variant
font-weight
font-stretch
font-size
font-size-adjust
font-feature-settings
text-align
text-decoration
text-indent
text-shadow
text-transform
letter-spacing
line-height
word-spacing
white-space

テーブル

caption-side
table-layout
border-collapse
border-spacing
empty-cells
speak-header

UI

cursor
outline
outline-width
outline-style
outline-color

その他

content
overflow
clip
visibility
opacity
transform

アニメーション

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

2020年4月1日改定