CSS 작성시 속성 순서

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)

당장은 이것을 하나 하나 체크하는 것이 더 시간이 걸리고 비효율 적으로 느껴질 수 있으나 처음 습관이 중요하다..! 그리고 내가 적은 코드도 일주만 지나면 낯설어진다,, 동료를 위해, 그리고 미래의 나를 위해 깔끔한 코드를 지향하자..!