CSS 프로퍼티 선언 순서

이전부터 팀 프로젝트에 사용했던 CSS 프로퍼티 선언 순서에 대해 정리합니다.

아래 자료를 기반으로 만든 건 아니지만, 순서 나열에 쓰기 위해 비슷한 기준으로 정리된 걸 사용합니다.

 

굵은 글씨 -> 분류

취소선 -> 자료와 기준 다름

밑 줄 -> 자주 사용

 

 

Positioning
position
top
right
bottom
left
z-index

Box model
display
float
width
height
max-width
max-height
min-width
min-height
padding
padding-top
padding-right
padding-bottom
padding-left
margin
margin-top
margin-right
margin-bottom
margin-left
margin-collapse
margin-top-collapse
margin-right-collapse
margin-bottom-collapse
margin-left-collapse
overflow
overflow-x
overflow-y
clip
clear

Typographic
font
font-family
font-size
font-smoothing
osx-font-smoothing
font-style
font-weight
hyphens
src
line-height
letter-spacing
word-spacing
color
text-align
text-decoration
text-indent
text-overflow
text-rendering
text-size-adjust
text-shadow
text-transform
word-break
word-wrap
white-space
vertical-align
list-style
list-style-type
list-style-position
list-style-image
pointer-events
cursor

Visual
background
background-attachment
background-color
background-image
background-position
background-repeat
background-size
border
border-collapse
border-top
border-right
border-bottom
border-left
border-color
border-image
border-top-color
border-right-color
border-bottom-color
border-left-color
border-spacing
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius-topright
border-radius-bottomright
border-radius-bottomleft
border-radius-topleft
content
quotes
outline
outline-offset
opacity
filter
visibility
size
zoom
transform
box-align
box-flex
box-orient
box-pack
box-shadow
box-sizing
table-layout
animation
animation-delay
animation-duration
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
animation-fill-mode
transition
transition-delay
transition-duration
transition-property
transition-timing-function
background-clip
backface-visibility
resize
appearance
user-select
interpolation-mode
direction
marks
page
set-link-source
unicode-bidi
speak

 

 

정리

position
top
right
bottom
left

margin
margin-top
margin-right
margin-bottom
margin-left

 

display
width
height
max-width
max-height
min-width
min-height

padding
padding-top
padding-right
padding-bottom
padding-left
overflow
overflow-x
overflow-y

 

font
font-family
font-size
font-weight
line-height
letter-spacing
word-spacing
color

text-decoration
text-align

vertical-align
text-overflow
word-break
word-wrap
white-space

 

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

background
background-color
background-image
background-repeat
opacity
visibility
size
transform
animation
animation-delay
animation-duration
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
animation-fill-mode
transition
transition-delay
transition-duration
transition-property
transition-timing-function

 

 

https://studyhardgogo.tistory.com/185 (자료 출처)

css 선언 순서