CSS우선순위

애초부터 의식적으로 수정과 유지보수를 고려한 것이라면 좋았을 것이지만, 딱히 그런것은 아니고 단지 반복적인 프로세스를 통해서 경험적으로 형성된 결과이다.

모든 스타일시트를 열어보고, 확인해 볼 수는 없었지만 최근의 것들을 살펴보니까 나는 다음과 같은 순서를 가지고 있었다.

1. display
2. position
3. clear
4. float
5. width / height
6. margin / padding
7. border / background
8. color / font
9. align / etc

모질라의 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

간단히 분석을 해보자면, 모질라의 제안이나 내 방식이나 레이아웃을 설정하는 것을 최우선으루 두고, 영역을 이루는 객체의 크기를 잡고, 텍스트 단위의 색과 모양, 정렬을 설정하는 형태가 된다. 조금 더 세세히 들어가면 유지보수를 위해서 수정이 자주 일어날 수 있는 속성들을 상대적으로 앞으로 배치하게 된다. 예전에는 디자인을 완벽하게 스타일시트로 분리하여 제작하는 경우가 없어 대부분 링크나 텍스트 컬러만을 다루는 정도여서 스타일시트의 분량이 적었고, 따라서 속성 하나당 한줄씩 잡는 코딩 방식을 썼지만 최근에는 분량이 많이 늘어나 한 스타일을 한줄로 이어 붙이는 방식을 많이 사용하는 것 같다. 그래서 가로로 스크롤이 생기거나 두줄 이상으로 이어지는 경우가 많은데 이런 경우 바로 수정할 속성이 비교적 앞쪽에 위치해 있는 것이 편리하다. 더불어, 속성명과 값을 붙이는 것보다 한 칸 띄우는 것이 가독성에도 좋고, 수정에도 용이한 것 같다. 다만, 최종적인 스타일시트의 경우 용량이 커질 수 있으므로 빈 칸을 모두 제거하여 한 줄로 만드는 CSS압축방식을 적용하면 좋을것 같다.