위스타그램 클론을 하면서 css 속성들을 어떤 순서로 나열해야할지 고민이 생겼다.
검색을 하다가 좋은 자료를 찾아서 기록을 해본다.
출처의 저자도 언급했지만, 어떻게 코딩을 하느냐는 매우 취향타는 문제이기 때문에 참고용으로 생각하면 좋겠다.

Outside In

저자가 선호하는 css 프로퍼티 정렬 방법은 'Outside In' 방법이다.
큰 범위의 속성부터 작은 범위의 속성 순으로 적는 것이다.

예를 들어 position 과 float 은 요소를 기존 흐름에서 벗어나게 하고 요소 주변의 것들의 흐름에도 영향을 주기 때문에 큰 범위의 속성이라고 할 수 있다. cursor 나 overflow 는 작은 범위의 속성이므로 아래에 써준다.

Order

• Layout Properties (position, float, clear, display)
• Box Model Properties (width, height, margin, padding)
• Visual Properties (color, background, border, box-shadow)
• Typography Properties (font-size, font-family, text-align, text-transform)
• Misc Properties (cursor, overflow, z-index)

Sample Code

1. 중요한 속성부터 덜 중요한 속성 순으로 적어준다.
2. 원한다면 각 속성 블럭마다 줄바꿈을 해준다. (가독성)

.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;
 
    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3), 
               0.5em 0.5em 0 #444;
 
    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}

"Outside In" - Ordering CSS Properties by Importance