CSS 속성 선언 순서 - by. UXKM

  • Publishing
  • CSS
  • CSS 중급
  • CSS 속성 선언 순서
요약 설명

CSS 속성을 선언하는 데에는 정확한 순서는 없지만, 일반적인 규칙(컨벤션)이 있습니다.
컨벤션은 개발자들 간의 암묵적인 약속으로, 코드의 가독성과 협업 효율을 높이기 위한 관례입니다.

가독성 측면에서 CSS 속성은 큰 흐름에서 작은 흐름 순으로 작성하는 것을 권장합니다.
CSS는 시각적인 표현이므로 가장 중요한 것은 보이게 하느냐 숨기느냐입니다. 따라서 display 속성이 있다면 먼저 정의하고, 순차적으로 레이아웃에 필요한 속성 순으로 작성합니다.
그 다음 디자인의 세부적인 제어를 위한 속성(보통 레이아웃과 거리가 먼 속성) 순으로 작성하는 것이 일반적입니다.

속성 순서를 완전히 지키지 않아도 되지만, 큰 틀 안에서 대략적으로 지키면 유지보수나 협업 시 어느 곳에 어떤 CSS 속성이 정의되어 있는지 빠르게 예측할 수 있어 코드의 가독성을 높일 수 있습니다.

CSS 속성 선언 순서는 정해진 규칙은 없지만, CSS의 가독성과 프로젝트 협업을 위해 팀 또는 개인만의 규칙을 지키는 습관이 중요합니다.
대표적인 CSS 속성 선언 순서 사례를 소개합니다.

해당 문서에서 사용되는 CSS 속성 선언 순서

  1. overflow - 시각적인 속성(Visual effects)
  2. visibility - 시각적인 속성(Visual effects)
  3. display - 위치 속성(Visual formatting model)
  4. position - 위치 속성(Visual formatting model)
  5. top - 위치 속성(Visual formatting model)
  6. right - 위치 속성(Visual formatting model)
  7. bottom - 위치 속성(Visual formatting model)
  8. left - 위치 속성(Visual formatting model)
  9. float - 위치 속성(Visual formatting model)
  10. clear - 위치 속성(Visual formatting model)
  11. width - 박스 모델 속성(Box Model)
  12. height - 박스 모델 속성(Box Model)
  13. margin - 박스 모델 속성(Box Model)
  14. padding - 박스 모델 속성(Box Model)
  15. border - 박스 모델 속성(Box Model)
  16. border-radius - 박스 모델 속성(Box Model)
  17. box-shadow - 박스 모델 속성(Box Model)
  18. background - Background 속성
  19. font - Font 속성
  20. text-align - Text 속성
  21. vertical-align - Text 속성
  22. letter-spacing - Text 속성
  23. word-spacing - Text 속성
  24. word-break - Text 속성
  25. word-wrap - Text 속성
  26. white-space - Text 속성
  27. text-indent - Text 속성
  28. text-decoration - Text 속성
  29. text-transform - Text 속성
  30. text-overflow - Text 속성
  31. text-shadow - Text 속성
  32. color - Color 속성
  33. outline - 사용자 인터페이스 속성(User interface)
  34. cursor - 사용자 인터페이스 속성(User interface)
  35. opacity - 사용자 인터페이스 속성(User interface)
  36. etc - 위에 언급되지 않은 기타 나머지 속성들

Naver Site CSS 속성 선언 순서

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

Daum Site CSS 속성 선언 순서

  1. display - 표시
  2. overflow - 넘침
  3. float - 흐름
  4. position - 위치
  5. z-index - 정렬
  6. width & height - 크기
  7. margin & padding - 간격
  8. border - 보더
  9. font - 폰트(축약형 사용 시)
  10. font-style - 폰트 스타일(축약형 비사용 시)
  11. font-variant - 폰트 소문자, 대문자(축약형 비사용 시)
  12. font-weight - 폰트 굵기(축약형 비사용 시)
  13. font-size - 폰트 사이즈(축약형 비사용 시)
  14. line-height - 폰트 행간 높이(축약형 비사용 시)
  15. font-family - 폰트(축약형 비사용 시)
  16. background - 배경
  17. 기타 - color, text-decoration, text-indent, clear 등