이 글의 목적?

CSS를 작성하다보면 width, height를 margin, padding 보다 먼저 작성을 해야할지 혹은 거꾸로 작성을 해야할지 등 어떤 순서를 가지도록 해야하는가에 대해 정리해보고자 한다. 이 부분은 각 회사의 컨벤션마다 다를 수 있다는 점을 기억하자! (회사에서 가장 먼저 확인해야하는 것 중에 하나가 바로 컨벤션이지 않을까?.. 싶다 🤪)

CSS 속성 작성 순서

CSS 속성은 레이아웃에 영향을 많이 주는 순서와 인접 속성끼리 묶어서 작성하도록 한다.

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

크게만 본다면 위치, 틀, 시각, 문자, 그 외의 순서로 작성하면 되겠다.

Bottom-up

이 글의 메인 주제는 CSS 속성 작성 순서이지만, 내용이 짧으니 번외로 CSS를 구성할 때 Bottom-up 레이아웃 구성 방법에 대해서도 정리해두자.

보통 레이아웃을 구성할 때 부모의 요소의 크기를 정해두고 자식 요소의 크기를 결정하는 Top-down 방식이 아닌, 자식의 요소부터 크기를 정하는 Bottom-up 레이아웃 방식을 사용해야한다. 그 이유는 부모 요소의 크기가 고정일 때 자식 요소의 크기가 변하면 유동적으로 변하지 않기 때문이다. 자식 요소의 크기가 변해야한다면, 부모의 요소 또한 수정해줘야하므로 유지보수에 어려움이 있다.

결국, 유지보수의 편의성을 위해 자식 요소부터 크기를 결정하는 Bottom-up 방식을 사용해야한다!

이 글의 레퍼런스

• 없음