Programming/HTML, CSS

[CSS] 속성 선언 순서

리버김 2023. 11. 12.
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. 기타 - 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함.

댓글