新規で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日改定