CSS 작성시 속성 선언 순서

CSS를 작업하다보면 하나의 클래스에 여러개 속성을 선언하는 경우가 자주 발생한다. 속성 작성에 규칙이 있다면 추후 코드를 들여다볼 때 조금 더 내용 파악이 쉽지 않을까? 하는 마음에 구글링을 해보니, 역시나 CSS 선언 순서와 관련된 내용이 방대하고도 자세하게 정리되어 있었다.

 

NHN 코딩 컨벤션

속성을 선언할 때는 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. 관련 속성은 대표되는 속성 다음으로 선언하며, 아래에 표기된 순서대로 선언한다.

1. 레이아웃
   1. display
   2. visibility
   3. overflow
   4. float
   5. clear
   6. position
   7. top
   8. right
   9. bottom
   10. left
   11. zindex
2. Box
   1. width
   2. height
   3. margin
   4. padding
   5. border
3. 배경
   1. background
4. 폰트
   1. font,color
   2. etter-spacing
   3. text-align
   4. text-decoration
   5. text-indent
   6. verticalalign
   7. white-space
5. 기타
   1. 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함
   2. 밴더속성과 핵속성은 해당 속성 뒤에 선언

Web Standards Darum

1. display (표시)
2. overflow (넘침)
3. float (흐름)
4. position (위치)
5. width&height (크기)
6. padding&margin (간격)
7. border (테두리)
8. background (배경)
9. color/font (글꼴)
10. animation
11. 기타

Code Guide - CSS Declaration order

관련 속성 선언은 다음 순서로 그룹핑한다.

1. Positioning (포지셔닝)
2. Box model (박스 모델)
3. Typographic (타이포그라피)
4. Visual (시각 효과)
5. Misc (기타)

문서의 정상적인 흐름에서 엘리먼트를 없앨 수 있고, 박스 모델 관련 스타일들을 재정의할 수 있기 때문에 포지션 관련 선언이 가장 먼저 온다. 박스 모델이 그 다음에 오며 해당 엘리먼트의 크기와 위치를 지정한다.

나머지는 이전의 두 섹션에 영향을 주지 않거나 엘리먼트의 내부에서만 필요한 내용이기 때문에 마지막에 온다.

Wrap up

구글링을 통해 얻을 수 있는 다른 CSS 선언 순서도 유사한 형태를 띄고 있다.

정리하자면 밖에서부터 안쪽의 순서로 선언하길 권장하고 있다.

엘리먼트의 폰트 컬러, 배경 색상을 지정해뒀다 하더라도 화면에 보일것이냐 보이지 않을것이냐가 더욱 중요한 사항이기 때문일 것이다.

 

작업할 때는 구조와 스타일을 분리하기 때문에 위치 선정, 사이즈, 색상 디테일까지 하나의 엘리먼트에 선언하는 경우는 거의 없다.

그래도 CSS를 선언할 때 최소한의 순서를 숙지해두면 작성과 유지보수에 모두 도움을 줄 수 있을것이다.

📖 참고 자료

• NHN 마크업 코딩 컨벤션
• Web Standard Darum
• Code Guide by Mark Otto
• CSS property order