개요

작은 규칙의 일관성이 유지보수성과 확장성을 만든다고 봄. 아래 세 가지 원칙은 팀 합의만 되면 즉시 적용 가능하며, 코드 리뷰와 리팩터링 부담을 낮추는 효과가 큼

className 네이밍은 하이픈 사용 권장

camelCase, under_score보다 하이픈(-) 기준 분절이 명확해 가독성과 편집성이 좋음. 대소문자 전환 없이 입력 가능해 타이핑 피로도도 낮음

에디터 단어 단위 이동/선택이 직관적. camelCase나 under_score는 하나의 토큰으로 취급되는 경우가 많아 커서 이동이 번거로움. 하이픈은 공백처럼 인식되어 단어 경계 이동이 쉬움. 예시로 sweetPotato, sweet_potato, sweet-potato 비교 추천

id 대신 className 중심으로 구성

HTML 명세상 id는 문서 내 유일 식별자여야 함. 단일 요소 스타일링이나 이벤트 바인딩에 id를 습관적으로 쓰면 재사용 시 제약이 커짐. 해당 스타일이나 동작이 진짜 한 번만 쓰일지 확신 없으면 className 사용이 안전

성능 등 이유로 id가 불가피하면 전역 유일성을 보장할 수 있는 네이밍 전략 필요. 충돌 가능성 최소화, 선택자 범위 명확화 권장

CSS 속성은 한 줄에 하나

가독성 향상, 속성 배치 고민 감소, 리뷰와 diff가 명확해짐. 어디가 바뀌었는지 한눈에 확인 가능

나쁨 예시

.selector { color: red; margin: 0 }

권장 예시

.selector {
  color: red;
  margin: 0;
}

정리

하이픈 기반 class 네이밍, id 최소화, CSS 속성 한 줄 규칙만으로도 코드 검색성, 충돌 방지, 변경 파악성이 크게 개선됨. 팀 룰로 고정하고 린터와 프리티어 같은 도구로 자동화하면 유지보수 비용 더 줄어듦

참고자료