10-CSS Coding Convention(관습)

1. CSS 작성순서

기본적으로 스타일시트 속성은 정해진 우선순위가 없고, 올바른 작성법이라고 권고하는 공신력 있는 규칙도 없기 때문에, 순전히 스타일시트를 작성하는 개발자가 편한대로 적는 것이 맞는 것입니다.

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

2. 코딩 컨벤션(Coding Convention)

언어를 개발한 단체나 기업에서 딱히 공식적인 규칙으로 지정하지 않은 번외의 내용에 대해 개인의 코딩 습관을 통일하여, 작업상의 가독성과 판독능력을 높여, 일의 능률을 증진시키기 위한 내부적인 공동의 약속을 코딩 컨벤션이라 합니다. 구글 코드 가이드나 NHN 코딩 컨벤션 같은 것들이 그것입니다.

오랜 노하우를 가진 사람들이 신경써서 만든 것들이기 때문에 참고할 만한 좋은 이야기가 많지만, 내부 공동체에 속하지 않은 사람에게는 강제력이 없는 상태에서 규칙이나 제약이 많아, 개인에게는 자유로운 기호에 대한 배려가 부족하므로, 이 글에서는 각종 컨벤션의 규칙등을 기준으로 삼지 않습니다.

3. 모질라 CSS Coding Convention

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

display
list-style
position
float
clear
width / height
padding / margin
border / background
color / font
text-decoration
text-align / vertical-align
white-space
other text
content

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

1.myClass {
2 ├── 객체의 노출여부와 표현방식
3 │   ├── display
4 │   └── list-style
5 │
6 ├── 위치와 좌표
7 │   ├── position
8 │   ├── float
9 │   └── clear
10 │
11 ├── 크기와 여백
12 │   ├── width / height
13 │   └── padding / margin
14 │
15 ├── 윤곽과 배경
16 │   └── border / background
17 │
18 ├── 글자와 정렬
19 │   ├── corlor / font
20 │   ├── text-decoration
21 │   ├── text-align / vertical-align
22 │   └── white-space
23 │
24 └── 내용
25     └── content

💡 content 속성

플로팅 드롭(Floating drop : 단 떨어짐 현상)을 막기 위해 가상선택자 안에서 주로 사용되다 보니,

많은 부분 속성의 의미를 포지셔닝 쪽으로 인지하는 경우가 있을 수 있지만,

본래는 HTML 태그 안에 실제로 텍스트와 같은 컨텐츠를 다이나믹하게 삽입해 주거나,

기존 컨텐츠를 보조하는 역할을 합니다.

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

4. 장점

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

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

아직도 남아있는 속성들이 몇 가지 있습니다. z-index, line-height, overflow는 어디에 둘 것이고, CSS3에서 새로 생긴 수많은 속성들은 또 어디에 두어야 할까요? 나머지는 당신의 몫입니다. 올바른 것도 없고 틀린 것도 없습니다.

Reference

09-미디어쿼리(fMedia Query)11-CSS Comment(주석) 방법론