[MDN Study] CSS 작성 팁

기술 노트
2025. 12. 9. 13:40
2025. 12. 9. 13:42

1. 개요

큰 스타일시트와 프로젝트에서 작업하다 보면 큰 CSS 파일을 유지보수하기가 어렵다는 것을 느낄 수 있다.

CSS를 쉽게 유지보수하기 위한 모범적인 지침과 솔루션을 정리한다.

2. CSS를 깔끔하게 유지하는 방법

  • 프로젝트에 코딩 스타일 가이드가 있다면 따르기
    팀 스타일 가이드는 항상 자신의 개인적 선호보다 우선되어야 한다.

  • 일관성 유지하기
    클래스에 이름을 붙일 때나 색상을 묘사할 때 등 반복·유사한 문법의 일관성을 유지해야 한다.

  • 읽기 쉬운 CSS로 포맷팅하기
    예를 들어 모든 규칙을 한 줄에 붙이는 것보다는 쪼개는 것이 더 읽기 쉬울 것이다.

  • CSS에 주석 달기
    다른 개발자들이 해당 CSS 파일 작업에 도움이 되고, 프로젝트에 복귀할 때도 도움이 된다.

  • 스타일시트 작성에 순서 적용하기
    예를 들어 모든 스타일을 body -> p -> h1~h5 -> ul, ol -> table -> links 순으로 작성하면 찾기 편할 것이다.
    스타일시트에 일반적인 스타일링을 먼저 넣는 것이 좋다.

  • 지나치게 개성적인 선택자 자제하기
    선택자 이름을 너무 구체적으로 하면 붙여넣기할 일이 많아진다.

  • 큰 스타일시트를 작게 쪼개기
    사이트의 다른 부분에 대해 전혀 다른 스타일을 하는 경우 작게 쪼개면 좋다.

OOCSS나 BEM 방법론을 참고하는 것도 좋다.

출처

CSS 구성