[CSS] CSS 네이밍 규칙

jjee·2025년 8월 4일
CSS네이밍규칙네이밍방법론네이밍컨벤션
0

CSS

목록 보기
5/24

썸네일

CSS 네이밍 규칙

개발자의 고충 중 큰 영역을 차지하는 네이밍 규칙에 대해서 알아보자.

이름 짓기?

프로그래밍 세계에서 이름 짓기(네이밍)는 꽤 많이 중요하다.
이름만 보고서도 무엇이 어떻게 쓰이는지 알 수 있도록 짓는 것이 목표이다.
좋은 이름은 코드의 가독성을 높이고, 유지보수를 쉽게 만들며, 팀원 간의 협업을 원활하게 할 수 있다.
프로젝트가 커질수록, 여러 개발자가 함께 작업할수록, 체계적인 네이밍 규칙은 프로젝트의 성공에 직접적인 영향을 미친다.

기본 네이밍 원칙

네이밍을 할 때 기본적으로 지켜야 하는 것들을 살펴보자.

의미 있는 이름

클래스나 아이디 이름은 해당 요소의 목적이나 내용을 명확하게 표현해야 한다.
이름만 보더라도 이게 무슨 역할을 하는 것인지 알 수 있도록 하는 것이 좋다.

.nav-menu {
  ...;
}
.product-card {
  ...;
}
.error-message {
  ...;
}

만약 아래와 같이 작성한다면 어떨까?

/* 나쁜 예 */
.div1 {
  ...;
}
.redbox {
  ...;
}
.left {
  ...;
}

설명이 부족하거나 의미 없는 이름을 작성한 경우, 이름만 봤을 때 이 요소가 무엇을 나타내는 것인지 알아볼 수 없다.
그러면 결국 HTML 문서를 직접 열어서 어떤 요소인지 확인을 해야 하는 수고로움이 생길 수 있다.

이러한 경우를 막기 위해서라도 의미있는 이름으로 작성해야 한다.

축약어 사용 주의

과도한 축약은 코드의 가독성을 해칠 수 있다.
명확한 의미 전달을 위해 완전한 단어를 사용하는 것이 좋다.
그래도 많이 알려진 축약어는 사용해도 괜찮다.

/* 권장 */
.navigation {
  ...;
} /* 또는 .nav */

.button {
  ...;
} /* 또는 .btn */

아래와 같이 작성하는 것은 지양하도록 하자.

/* 지양 */
.nv {
  ...;
}
.bt {
  ...;
}

네이밍 주의 사항

네이밍을 할 때 주의해야 할 사항을 알아보자.

소문자 사용

CSS는 대소문자를 구분한다.
일관성을 위해서 소문자만 사용하는 것을 권장한다.

/* 권장 */
.main-header {
  ...;
}
 
/* 지양 (일관성 없음) */
.MainHeader {
  ...;
}
.main_Header {
  ...;
}

JavaScript에서는 대문자를 함께 사용하는 네이밍 방법을 사용한다.
하지만 CSS에서는 소문자만을 사용하는 것을 기억하자.

특수문자 제한

클래스명과 아이디는 문자, 숫자, 하이픈(-), 언더스코어(_)만 사용이 가능하다.

/* 권장 */
.user-profile {
  ...;
}
.error_message {
  ...;
}
 
/* 지양 */
.user@profile {
  ...;
} /* 에러 발생 */
.123-error {
  ...;
} /* 유효하지 않음 */

그 중에서도 언더스코어보다는 하이픈을 사용하는 것을 더 권장한다.

숫자로 시작 금지

클래스명을 숫자로 시작하는 경우 오류가 발생한다.
반드시 문자, 하이픈(-), 언더스코어(_)로 시작해야 한다.

/* 에러 발생 */
.123-error {
  ...;
}

이름 길이 적당히

너무 긴 이름은 코드의 가독성을 해치며 입력하기도 힘들다.
그렇다고 너무 짧게 축약하는 것도 옳지 않다.
의미를 명확하게 전달하는 적절한 길이의 이름을 사용해야 한다.

/* 적절한 길이 */
.user-profile {
  ...;
}
.notification-alert {
  ...;
}
 
/* 너무 길고 복잡함 */
.top-navigation-menu-item-with-dropdown-enabled {
  ...;
}

일부 긴 단어 중 이미 많이 사용하여 흔히 알려진 축약어가 있기도 하니, 검색 해보도록 하자.
그렇지 않은 경우에는 유사한 의미의 짧고 간결한 단어가 있는지 알아보자.

주요 네이밍 컨벤션

개발자들은 자주 사용하는 네이밍 방식에 따라 별명을 붙여주었다.
자주 사용하는 네이밍 컨벤션에 대해 알아보자.

케밥 케이스(kebab-case)

소문자 단어 사이에 하이픈(-)으로 구분하는 방식이다.
CSS 클래스 네이밍에 가장 널리 사용되는 건벤션이다.

.user-profile {
  display: flex;
}
.main-navigation {
  position: sticky;
}

대소문자를 구분하지 않는 HTML은 속성으로 하이픈(-)을 사용하고 있다.
이에 호환성을 위하여 대소문자를 구분하는 CSS 역시 하이픈(-)에 소문자만을 사용하는 케밥 케이스를 주로 사용한다.
또한 하이픈(-)을 이용하여 단어를 구분짓기 때문에 가독성이 좋다.

카멜 케이스(camelCase)

첫 단어는 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 표기하는 방식이다.
JavaScript에서 주로 사용하며, CSS에서는 권장되지 않는다.

.userProfile {
  font-size: 16px;
}
.navbarToggle {
  cursor: pointer;
}

파스칼 케이스(PascalCase)

맨 첫 단어를 비롯한 모든 단어마다 첫 철자를 대문자로 표기하는 방식이다.
단어마다 솟아오른 철자가 쌍봉낙타 등처럼 보여 어퍼 카멜 케이스라고도 부른다.
프로그래밍 언어에서 사용하는 클래스 이름을 지정하는 데 많이 쓰인다.

.UserProfile {
  background-color: #f5f5f5;
}

.ErrorMessage {
  color: red;
}

스네이크 케이스(snake_case)

단어 사이를 언더스코어(_)로 구분하는 방식으로 파일명이나 데이터베이스 필드에 주로 사용된다.
CSS에서는 자주 사용되지 않는다.

.user_profile {
  background-color: #f5f5f5;
}
.error_message {
  color: red;
}

스크리밍 스네이크 케이스(SCREAMING_SNAKE_CASE)

모든 철자를 대문자로 쓰고 단어 사이에 언더스코어_를 표기하는 방식이다.
대문자 철자가 소리를 지르듯(Screaming) 강조하는 느낌을 준다.
주로 프로그램 실행 중 값이 변하지 않아야 하는 특정 상수(Constant)나 데이터베이스 필드명에 사용된다.

.USER_PROFILE {
  background-color: #f5f5f5;
}
.ERROR_MESSAGE {
  color: red;
}

헝가리안 표기법(Hungarian Notation)

변수나 함수 이름 앞에 타입 접두사를 붙여 어떤 종류의 데이터를 저장하는지를 가리키는 방식이다.(정수형을 가리키는 int, 문자열을 가리키는 str, 객체를 가리키는 obj 등...)
1970년대 헝가리 출신의 마이크로소프트 프로그래머 찰스 시모니(Charles Simonyi)가 고안했으며, 지금은 예전만큼 활발히 쓰이지 않는 방식이다.

.intPrice {
  color: red;
}
.strUserName {
  color: red;
}
.objDocument {
  color: red;
}

네이밍 컨벤션에 대해 참고한 글을 링크 걸어두겠다. (네이밍 컨벤션)

주요 네이밍 방법론

이름을 짓는 모양새를 네이밍 컨벤션이라고 한다면, 이 이름을 어떠한 방식으로 채울지를 고민하는 것은 네이밍 방법론이라고 한다.
실무에서는 다양한 CSS 네이밍 방법론이 사용되며, 각 방법론은 고유한 장점이 있다.
프로젝트의 특성과 팀의 선호도에 따라 다른 방법론을 선택할 수 있다.

BEM(Block Element Modifier)

BEM은 Block, Element, Modifier의 세 가지 개념으로 구성된 네이밍 방법론이다.
이 방법은 클래스 이름만으로도 HTML 구조를 이해할 수 있게 해준다.

.Block__Element-Modifire {...}

Block

독립적인 의미를 가지는 추상화된 컴포넌트
ex) user-component__title

Element

블록의 구성요소로 자신이 속한 Block내에서만 의미를 가지기 때문에 Block에 의존적이다.
ex) user-component__title, user-component__column

Modifier

Block이나 Element의 속성(상태 또는 행동) 담당한다.
생긴 게 조금 다르거나(예: not--bold) 다르게 동작하는 블럭이나 엘리먼트를 만들 때, 추가하는 방식으로 사용한다.
ex) user-component__title-not-bold

/* Block: 독립적인 컴포넌트 */
.card {
  ...;
}
 
/* Element: 블록의 일부분 (더블 언더스코어 사용) */
.card__title {
  ...;
}
.card__image {
  ...;
}
.card__button {
  ...;
}
 
/* Modifier: 블록이나 요소의 변형 (더블 하이픈 사용) */
.card--featured {
  ...;
}
.card__button--disabled {
  ...;
}

장점

  • 명확한 구조
    클래스 이름만 보고도 요소의 역할과 관계를 이해할 수 있다.
  • 모듈성
    재사용 가능한 독립적 블록으로 구성되어 있어 확장성이 좋다.
  • 네임스페이스 충돌 방지
    이름 충돌 가능성이 적어 대규모 프로젝트에 적합하다.
  • 쉬운 디버깅
    클래스 이름이 명확해 디버깅이 용이하다.

OOCSS (Object Oriented CSS)

OOCSS는 구조와 스킨을 분리하여 중복을 최소화하고, 재사용 가능한 CSS를 작성하는 방법론이다.
아이디 선택자를 사용하지 않으며 각 단어를 하이픈(-)으로 구분한다.

  • 구조와 외형 분리
    반복되는 기본 구조 및 외형과 관련된 내용을 공통 스타일화 하여 정의한다.
  • 컨텐츠와 컨테이너 분리
    어떤 요소(element)에 적용되어 있는게 중요한 것이 아니라 클래스를 적용한 컨텐츠 자체에 의미를 부여하고 사용한다.
    태그에 영향없이 클래스 자체에 스타일이 부여되기 때문에 재사용이 용이하다.
/* style.css */
/* 구조 */
.btn {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 4px;
}
 
/* 스킨 */
.btn-primary {
  background-color: blue;
  color: white;
}
 
.btn-secondary {
  background-color: gray;
  color: black;
}
<!-- index.html -->
<button class="btn btn-primary">확인</button>
<button class="btn btn-secondary">취소</button>

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 CSS를 카테고리로 분류하여 구조화하는 방법론이다.

  • Base: 기본 스타일 (reset, 요소 선택자)
  • Layout: 페이지 구조 요소 (header, footer, main)
  • Module: 재사용 가능한 모듈 (nav, card, button)
  • State: 상태 변화 (is-active, is-hidden)
  • Theme: 시각적 테마 (theme-dark, theme-light)
/* Layout */
.l-header {
  ...;
}
.l-sidebar {
  ...;
}
 
/* Module */
.nav {
  ...;
}
.nav-item {
  ...;
}
 
/* State */
.is-active {
  ...;
}
.is-disabled {
  ...;
}

참고할만한 사이트

네이밍 컨벤션 핵심

잘 정의된 네이밍 규칙은 코드의 품질을 높이고, 유지보수성을 개선하며, 팀 협업을 원활하게 한다.
어떤 방법론을 선택하든, 일관성을 유지하고 의미를 명확하게 전달하는 것이 가장 중요하다.

/* 일관성 있는 코드 */
.user-profile { }
.user-profile__avatar { }
.user-profile__name { }
.user-profile--compact { }
 
.product-card { }
.product-card__image { }
.product-card__title { }
.product-card--featured { }
 
/* 일관성 없는 코드 */
.user-profile { }
.userAvatar { }         
.user_name { }           
.profile-compact { }   
 
.productCard { }      
.product__img { }

특히 프로젝트가 커지거나 함께 작업하는 사람들이 많아질 수록 네이밍 규칙의 중요성이 더욱 커진다.
시간을 들여 좋은 네이밍 규칙을 정립하고 따르는 것은 장기적으로 큰 효율성을 가져올 것이다.

profile
jjee
내가 나에게 알려주는 개발 공부
이전 포스트

[CSS] CSS 선택자

다음 포스트

[CSS] CSS 단위

0개의 댓글