[CSS] css 선언 순서

 

css 선언 순서를 정해놓으면 팀프로젝트로 여러명이 작업을 할때 css가 통일성을 가져서 보기에도 좋고, 운영 유지에도 좋다. 

 

나는 display, width, height, position, margin, padding, font, 꾸밈요소, overflow, z-index + position:relative (position: relative가 마지막인 이유는 타 position의 기준이 되기 때문에 마지막에 넣는 경우가 많아서) 순서로 작업을 했다.

 

작업을 하다보니 박스부터 디테일하게 들어가는게 좋을 것 같아서 그렇게 하기로 한건데, 다른 큰 회사들은 어떻게 쓰는

지 궁금해졌다.  보통은 큰 회사를 보고 따라가는 사람들이 많기 때문이다. 나도 타 사이트들을 보면서 은연중에 css 순서를 인식했을것이고, 때문에 박스부터 디테일하게 css를 만들어야겠다 라는 생각을 한것이다.

 

여튼, 대표적인 몇몇의 사이트 순서도를 보고 정리해서 팀에 적용시켜야겠다.

 

 

보다보니 박스에서 디테일하게 흘러가는건 똑같은데 차이가 조금씩 있다.

무엇을 중요하게 보는가에 따라 다른걸까?

 

 

 

---

 

#모질라 파이어폭스

 

1. display

2. list-style

3. position

4. float

5. clear

6. width/height

7. padding/margin

8. border/background

9. color/font

10. text-decoration

11. taxt-align/vertical-align

12. white-space

13. other text

14. content

 

---

 

#네이버 CSS 선언 순서

 

1. display(표시)

2. overflow(넘침)

3. float(흐름)

4. position(위치)

5. width/height(크기)

6. padding/margin(간격)

7. border(테두리)

8. background(배경)

9. color/font(글꼴)

10. animation

11. 기타

1~6 레이아웃  |  7~8 테두리/배경  |  9 글꼴  |  10 동작  |  11 기타  

 

---

 

#git hub

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

 

 

---

 

최종

 

positioning

     position (z-index)

box model
     display
     float
     width/height (max/min)
     padding/margin
     overflow
     clear

typographic
     font (축약형으로 쓰지 않는다)
     color
     text
     list-style
     pointer-events
     cursor
     visual
     backgrond
     border

etc
     content
     transform
     animation
     transition

 

 

 

 

 

 

 

 

 

 

 

 

---

출처: https://jsunnylab.tistory.com/32 [Jsunny Lab]