CSS 속성 우선순위

모질라가 제안하는 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압축방식을 적용하면 좋을것 같다.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.