CSS 속성 선언 순서 - by. UXKM

요약 설명

CSS 에 속성을 선언하는데에는 암묵적·묵시적인 선언 순서가 있습니다.
다시 말해, 속성과 값을 선언하는데 정확한 순서는 없지만 일반적인 규칙(컨벤션)이 있습니다.

규칙(컨벤션)이라 함은 관례, 관습의 의미하는데 프로그래밍적으로는 암묵적·묵시적인 개발자 서로 간의 약속과 같은 것을 말합니다.
자바스크립트에 작성함에 있어서도 생성자 함수를 사용하는데 대문자로 사용한다거나 jQuery 작성함에 있어서도 코드의 가독성을 측면에서 코드 작성시 지킬 것을 권장하는 것들이 있습니다. 그리고 html 마크업을 함에 있어서도 부모와 자식,자손 간의 노드를 들여쓰기를 구분하는 것도 규칙(컨벤션)의 일종입니다.

네이버 같은 경우는 마크업을 함에 있어서 본인 업무의 규칙(컨벤션)이 있어서 들여쓰기를 하지 않습니다.
그곳 업무 영역만의 약속인 것입니다. 그리고 본인이 진행하는 프로젝트에서도 작업자들간에 협업을 위해 미팅 후에 컨벤션(Coding Guide)을 정해놓고 프로젝트를 시작하는 것이 좋습니다.
이런 식으로 사용되는 컨벤션은 각 언어마다 존재하며 이 관례·관습를 지켜주면 코드의 가독성은 물론 작업자 서로 간의 업무 효율 또한 향상시킬 수 있습니다.

가독성 측면에서 위의 속성들을 큰 흐림에서 작은 흐름으로 작성하실 권장하고 있습니다.
큰 흐름에는 여러가지가 있을 수 있지만 CSS 는 시각적인 표현에 해당하므로 가장 중요한 것이 보이게 하느냐 숨기느냐에 대한 것입니다.
그래서 선언해야될 속성중에 display가 있다면 처음에 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(그룹) - 폰트(관련속성:colr,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 - 폰트스타일(font-style: bold; 축약형 비사용시)
  11. font-variant - 폰트 소문자, 대문자(font-variant: small-caps; 축약형 비사용시)
  12. font-weight - 폰트굵기(font-weight: bold; 축약형 비사용시)
  13. font-size - 폰트 사이즈(font-size: 14px; 축약형 비사용시)
  14. line-height - 폰트 행간높이(line-height: 1.5; 축약형 비사용시)
  15. font-family - 폰트(font-family:'굴림', Gulim, sans-serif; 축약형 비사용시)
  16. background - 배경
  17. etc(기타) - color, text-decoration, text-indent, clear...