코딩 컨벤션(Coding Convention)이란?
언어를 개발한 단체나 기업에서 딱히 공식적인 규칙으로 지정하지 않은 번외의 내용에 대해 개인의 코딩 습관을 통일하여, 작업상의 가독성과 판독능력을 높여 일의 능률을 증진시키기 위한 내부적인 공동의 약속을 코딩 컨벤션이라 한다.
CSS 속성순위의는 경우 역시 공식적으로 지정된 작성법이 없으며 CSS 속성순위가 웹 브라우저의 퍼포먼스 향상 면이나 에러유발 방지에 영향을 주지 않기 때문에 계층구조만 고려하여 작성하게 되는 경우가 있다.
그러나 정해진 규칙없이 CSS속성을 작성할 때 만약 그 프로젝트에 다수가 참여할 경우, 코드 가독성이 떨어지는 혼란을 초래할 수 있다. 이러한 문제점을 방지하고 코드의 효율성을 높이기위해 모질라(Mozilla)에서 제안하는 CSS 속성 코딩 컨벤션을 포스팅해보았다.
모질라에서 제안한 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 (내용)
순서를 매겨 정리해보면 리스트가 꽤 많다. 이거 다 외워야해? 하고 울컥할 수도 있지만 위에서 부터 읽어내려가면 일반적으로 스타일링할 때 사용하는 순서와 크게 다르지않은 것을 알 수 있다.
전체적인 흐름은 아래와 같다.
위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피
큰것에서 부터 작은 것, 큰 그림에서부터 디테일한 부분까지 타고들어가는 이미지이다.
content속성은 플로팅 드롭(Floating drop : 단 떨어짐 현상)을 막기 위해 가상선택자 안에서 주로 사용되다 보니, 많은 부분 속성의 의미를 포지셔닝 쪽으로 인지하는 경우가 있을 수 있지만, 본래는 HTML 태그 안에 실제로 텍스트와 같은 컨텐츠를 다이나믹하게 삽입해 주거나 기존 컨텐츠를 보조하는 역할을 한다.
코딩 컨벤션의 장점
이렇게 모질라가 제안한 순서대로 CSS 속성을 기술하면 특정 속성을 찾기 쉬운 이점이 있다. 순위가 정해진 속성은 처음과 끝만 살펴봐도 대강의 위치를 짐작할 수 있기 때문에 특히 속성을 개행하지 않고 한 줄에 모두 기술하는 인라인 코딩 방식을 쓰는 작성자에게 효과가 있다.
후기
모든 프로그래밍 언어가 그렇듯 CSS에도 새로운 속성이 계속 등장하기때문에 위의 리스트에 포함되어있지 않은 속성도 많다. z-index, line-height, overflow도 그 예이며 CSS3 이후 새로 등장한 속성들이 들어갈 자리도 아직 정해지지 않았다. 이것은 이후 모질라에서 제안한 코딩 컨벤션 순서를 지켜 CSS를 작성하면서 스스로 납득할만 한 규칙을 찾고 타인에게도 가독성 좋은 코드를 작성하기 위해 계속 고민해야할 문제이다.
