이 게시물은 2016년 8월 8일 수정판입니다.

이야기에 앞서

스타일시트를 자주 수정하거나 혹은 다른 이의 소스를 편집할 때 우리는 항상 특정 CSS 속성을 찾느라 분주합니다. 기본적으로 스타일시트 속성은 정해진 우선순위가 없고, 올바른 작성법이라고 권고하는 공신력 있는 규칙도 없기 때문에 순전히 스타일시트를 작성하는 당사자 편한대로 적는 것이 맞는 것입니다.

사실, 직업적으로 스타일시트를 만지는 사람이라면 누구나 어느정도는 자신만의 규칙을 세우고 그에 맞춰 작성합니다. 재미있는 것은, 자기가 세운 규칙을 누가 배낀 마냥 다른 사람들도 크게 다르지 않게 사용하고 있다는 점입니다.

웹 브라우저 제조사인 모질라(Mozilla) 혹은, 여러가지 코딩 컨벤션에서는 CSS 속성을 기술할 때 다음과 같은 순서로 작성할 것을 제안하고 있습니다.

CSS의 속성 순위는 웹 브라우저의 퍼포먼스 향상 면이나 에러유발 방지에 영향을 주지 않습니다.

1. display
2. list-style
3. position
4. float
5. clear
6. width / height
7. padding / margin
8. border / background
9. color / font
10. text-decoration
11. text-align / vertical-align
12. white-space
13. other text
14. content

몸에 베어있는 상식 그대로

이 순서는 우리가 일상에서 접한 상식 그 자체일 뿐입니다. 그림을 그릴때도 그렇고 건축을 할 때도 그렇습니다. 항상 위치 선정, 윤곽 스케치, 외곽 디테일링, 채색, 타이포그라피. 바깥에서 안쪽으로의 흐름은 우리가 자연스럽게 느끼고 배운 그대로의 상식이고, 이것이 반영된 것 뿐 아닐까요. 그래서 우리는 모두 비슷비슷한 순서대로 속성을 써 내려가는 것이 아닐까요.

.myClass {
 ├── 객체의 노출여부와 표현방식
 │   ├── display
 │   └── list-style
 │
 ├── 위치와 좌표
 │   ├── position
 │   ├── float
 │   └── clear
 │
 ├── 크기와 여백
 │   ├── width / height
 │   └── padding / margin
 │
 ├── 윤곽과 배경
 │   └── border / background
 │
 ├── 글자와 정렬
 │   ├── corlor / font
 │   ├── text-decoration
 │   ├── text-align / vertical-align
 │   └── white-space
 │
 └── 내용
     └── content

content 속성은 플로팅 드롭(Floating drop : 단 떨어짐 현상)을 막기 위해 가상선택자 안에서 주로 사용되다 보니, 많은 부분 속성의 의미를 포지셔닝 쪽으로 인지하는 경우가 있을 수 있지만, 본래는 HTML 태그 안에 실제로 텍스트와 같은 컨텐츠를 다이나믹하게 삽입해 주거나 기존 컨텐츠를 보조하는 역할을 합니다.

순서에 대해 이해가 됐다고 하더라도 너무 이것에 얽메여서 원활한 작업에 방해가 되서는 안되겠죠. 때에 따라서는 배경색을 먼저 정의해서 시각적인 도움을 미리 받아야 하는 때도 있습니다. 편한 방식대로 쭉쭉 써 내려가고나서 나중에 조금 수고를 들여 순서를 바꿔주는 것으로 충분하다 하겠습니다.

최고의 메리트는

속성에 순서를 정해놓음으로 해서 얻는 이점으로는 역시 특정 속성을 찾기 쉽다는 것에 있습니다. 이것은 속성을 개행하지 않고 한 줄에 모두 기술하는 인라인 코딩 방식을 쓰는 작성자에게 특히 효과가 있습니다. 순위가 정해진 속성은 처음과 끝만 살펴봐도 대강의 위치를 짐작할 수 있기 때문입니다.

.ct-code.box { display: block; position: relative; top: 10px; right:25px; clear: both; margin: 0 0 20px 0; padding: 10px 15px; border: 1px solid #dddddd; border-radius: 4px; background-color: #f7f7f9; color: #414141; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.4; white-space:nowrap;
}

인라인 코딩 방식에서 만일 웹 브라우저 제조사별 Prefix(예를들어, -webkit-text-shadow 따위)까지 붙은 속성들이 나열되어 있다면, 판독은 더더욱 지옥으로 변합니다. 이미 규칙에 대한 이해가 있는 사람이라면 쉽게 특정 속성의 위치를 분간해 낼 수 있겠지만, 그렇지 않은 사람의 경우는 코드의 처음부터 끝을 모조리 스캔해야 합니다.

나머지는 당신의 몫

속성을 써 내려가는 것에 반드시 옳고 그름이 없다는 것은 전제되어 있었습니다. 기술방식을 완전히 거꾸로 해 놓아도 그것이 편하다고 생각한다면 맞는 것이겠죠. 다만, 다른 사람과 함께 작업해야 한다거나, 혹은 다른 사람이 만든 CSS를 판독한다거나 할 때는 분명 좋은 습관이 가져다 주는 이점은 충분히 있습니다.

아직도 남아있는 속성들이 몇 가지 있습니다. z-index, line-height, overflow는 어디에 둘 것이고, CSS3에서 새로 생긴 수많은 속성들은 또 어디에 두어야 할까요?

나머지는 당신의 몫입니다. 올바른 것도 없고 틀린 것도 없습니다. 지금까지 알아본 전체적인 순서에 대해 공감한다면, 어느 속성을 어디에 두든 그것은 분명히 자신이든 타인이든, 적정한 선에서 모든 이의 눈에 쉽게 들어올 것입니다.