CSS property의 순서

과제를 할 때 마다 '기한 내에 어떻게든 기능을 구현한다' 에 촛점을 맞췄고, 그 때마다 내게 익숙한 객체만을 사용해서 CSS에 속성 때려넣기를 반복했는데, 그러다보니 property에도 순서가 있다는 피드백을 받았기에 기록차 블로그글을 작성한다. 

 

 나는 39%에 속했었네. (출처: CSS-tricks.com)

사실 CSS properties의 순서는 그렇게 중요하지 않다고 생각하는 사람들이 39%나 되지만 , CSS-tricks.com에서는 CSS properties의 순서에 따라 하나 이상의 value를 전달할 때에 예상치 못한 결과가 나올 수도 있다고 말하고 있다.

(이하 예제 출처: css-tricks.com/ordering-css3-properties/)

 

여기 있는 두 개의 상자는 둘 다 border-radius 와 -webkit-border-radius를 갖고 있지만, 이 두 property의 순서는 각기 다르다. 

 

 

Wrongway라는 상자는 border-radius가 처음에,

rightway에는 border-radius가 맨 마지막에 있다.

두 상자의 CSS 내용은 순서를 제외하고 똑같지만, 그 결과는 다르다. 

border-radius 와 -webkit-border-radius 둘 다 상자의 가장자리 디자인을 위한 속성이지만, 실행결과에서는 각자 마지막에 온 property 만을 반영하는 것을 알 수있다. 

 

그렇다면 CSS property를 작성할 때 어떤 기준에 따라야할까?

구글링해본 결과, 공동작업의 경우에는 (당연히) 팀의 기준에 따르며, 그 외에는 중요도에 따라서 그룹화하는 것이 선호되는 방식인 것 같다. 

 

중요도에 따른 순서는 다음과 같다. 

1. Layout 속성 (position, float, clear, display)

2. Box model 속성 (width, height, margin, padding)

3. Visual 속성 (color, background, border, box-shadow)

4. Typography 속성 (font, text 관련)

5. Misc Properties (cursor, overflow, z-index)

 

css-tricks.com에서도 Nicolas Gallagher의 "일관성있는 CSS를 작성하기 위한 원칙" 블로그를 인용하여 상기와 유사한 그룹화 순서를 주장하고 있다.