[CSS] 속성 선언 순서

CSS 속성의 선언 순서를 스스로 정리해 본 적이 없는 것 같아 네이버의 CSS 코드를 참고해 정해 보았다. 평소 best practice나 클린 코드 관련 글들에서 읽은 것과 결이 같아 좋은 기준이 될 것 같다.

 

1. display - 표시(관련 속성: visibility)
2. overflow - 넘침
3. float - 흐름(관련 속성: clear)
4. position - 위치(관련 속성: top, right, bottom, left, z-index)
5. width & height - 크기
6. margin & padding(그룹) - 간격
7. border(그룹) - 테두리
8. background(그룹) - 배경
9. font(그룹) - 폰트(관련 속성: color, letter-spacing, text-align, text-decoration, text-indent, vertical-align, white-space 등)
10. animation - 동작(관련 속성: animation, transform, transition, marquee 등)
11. 기타 - 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함.