선택자(클래스, ID) 사용 기준과 실전 가이드 그리고 BEM

 

주의

공부하는 과정에서 정리하는 하나의 가이드라인일 뿐입니다. 

 

클래스 선택자 vs ID 선택자 - 사용 기준과 실전 가이드

CSS에서 효율적인 스타일링을 위해 클래스 선택자와 ID 선택자를 적절히 사용하는 것이 중요합니다. 각각의 선택자는 특정 상황에 맞게 사용해야 코드가 깔끔하고 유지보수가 쉬워집니다.

 

ID 선택자(#) - 고유한 요소에 사용

특징

• 문서 내에서 유일한 요소에 사용합니다 > 단일 요소를 명확하게 타겟팅해야 할 때 적합
• 명시도(Specificity)가 높아 우선순위가 가장 강함
• 자바스크립트에서 DOM 조작할 때 사용하기 편리함

사용 기준

• 페이지에서 단 한 번만 등장하는 요소
• 레이아웃의 주요 구조 요소 : `#header`, `#footer`, `#main-content`
• 특정 상호작용이 필요한 요소 : `#modal`, `#nav-toggle`

예시

<header id="main-header">Welcome</header>
<section id="hero-banner">Hero Section</section>
<div id="modal-window">Modal Content</div>

 

클래스 선택자(.) - 반복되는 스타일에 사용

특징

• 여러 요소에 반복적으로 사용 가능
• 재사용성과 유지보수성이 뛰어남
• 명시도는 낮지만, 조합하여 세밀하게 컨트롤할 수 있음
• 모듈화 및 컴포넌트 기반 개발에 적합

사용 기준

• 여러 요소에 동일한 스타일을 적용할 때
• 유사한 스타일을 공유하는 섹션 : `.btn`, `.card`, `.alert`
• 재사용 가능한 컴포넌트와 레이아웃 구성 : `.container`, `.grid`
• 상태를 나타내는 경우 : `.active`, `.disabled`

예시

<button class="btn btn-primary">Submit</button>
<button class="btn btn-secondary">Cancel</button>

<div class="card highlight">
  <p class="card-text">Lorem ipsum</p>
</div>

 

 

사용 기준 정리 - 언제 ID, 언제 클래스?

기준	ID 선택자	클래스 선택자
유일성	단 하나의 요소	여러 요소에 적용 가능
재사용성	재사용 불가능	재사용 가능
명시도	높음 (100)	낮음 (10)
자바스크립트	DOM 조작에 직접 사용	자주 사용하지만 ID만큼 명확하지 않음
유지보수성	낮음 (과도하게 사용하면 수정이 어려움)	높음 (한 곳에서 변경 시 모든 요소에 적용)
예시	`#header`, `#modal`, `#nav`	`.btn`, `.card`, `.highlight`, `.form`

 

실전 예시 - ID와 클래스 조합하기

<header id="main-header" class="header">
  <nav class="nav">
    <ul class="nav-list">
      <li class="nav-item active">Home</li>
      <li class="nav-item">About</li>
      <li class="nav-item">Contact</li>
    </ul>
  </nav>
</header>

<section id="hero" class="hero-section">
  <h1 class="hero-title">Welcome to Our Website</h1>
</section>

• ID (`#main-header`) : 페이지에 하나만 존재하는 헤더 영역
• 클래스 (`.nav-item`, `hero-section`) : 여러 곳에서 재사용 가능한 스타일

 

실무에서 자주 사용하는 패턴

레이아웃 구조 > ID 사용

<div id="main-container"></div>
<footer id="footer"></footer>

버튼, 카드 등 반복되는 요소 > 클래스 사용

<button class="btn btn-primary">Click Me</button>
<button class="btn btn-secondary">Cancel</button>

특정 요소에만 스타일 적용이 필요한 경우 > ID 사용 + 클래스 추가

<section id="about-section" class="section">
  <h2 class="section-title">About Us</h2>
</section>

 

자바스크립트와 CSS의 상호작용

// ID로 특정 요소 선택
const modal = document.getElementById('modal-window');
modal.style.display = 'block';

// 클래스 추가 및 제거
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => item.classList.add('highlight'));

 

주의할 점

ID 남용 금지

유지보수가 어렵고 CSS 우선순위가 꼬일 수 있습니다.

클래스 재사용

ID는 레이아웃 구성을 위해 최소한으로 사용하고, 대부분의 스타일링은 클래스로 해결하는 것이 효율적입니다.

BEM (Block Element Modifier) 활용

재사용성과 가독성을 높이기 위해 BEM 방법론을 적용하는 것도 좋은 선택입니다.

 

---

BEM (Block, Element, Modifier) - CSS 네이밍 규칙

BEM은 CSS를 구조화하고 모듈화하는 방법론으로, 유지보수성과 재사용성을 극대화하기 위해 사용됩니다. 이 방식은 CSS의 혼란을 방지하고, 명확하고 직관적인 네이밍 규칙을 제공합니다.

 

BEM이란?

• BEM = Block, Element, Modifier
• 목적
  • CSS 클래스의 구조와 관계를 명확하게 정의
  • 코드의 재사용성과 확장성을 향상
  • 대규모 프로젝트에서도 일관성 있는 스타일링 유지

 

BEM 기본 규칙

요소	설명	예시
Block	독립적이고 재사용 가능한 컨테이너, UI의 주요 구성 요소	`header`, `nav`, `card`
Element	Block의 자식 요소, 독립적이지 않으며 Block에 종속됨	`nav__item`, `card__title`
Modifier	Block 또는 Element의 상태, 변형을 나타냄	`card--highlight`, `btn--disabled`

 

BEM 네이밍 규칙

• Block : 컴포넌트 이름(단독 사용)
• Element : Block 뒤에 `__` (언더스코어 2개)
• Modifier : Block 또는 Element 뒤에 `--` (하이픈 2개)

<div class="card card--highlight">
  <h1 class="card__title">Card Title</h1>
  <p class="card__description">This is a card description.</p>
  <button class="card__button card__button--disabled">Submit</button>
</div>

 

BEM 예제

예시 분석

<div class="button button--primary">
  <span class="button__icon"></span>
  Click Me
</div>

• Block : `button` - 독립적인 버튼 컴포넌트
• Element : `button__icon` - 버튼 내 아이콘(Block의 자식)
• Modifier : `button--primary` - 주 버튼(Primary Button)

 

BEM 예제 - 실제 사용 사례

HTML 구조

<section class="hero">
  <div class="hero__content">
    <h1 class="hero__title">Welcome to BEM</h1>
    <button class="hero__button hero__button--large">Learn More</button>
  </div>
</section>

CSS 스타일링

/* Block */
.hero {
  background-color: #f0f0f0;
  text-align: center;
  padding: 50px 20px;
}

/* Element */
.hero__title {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero__button {
  padding: 10px 30px;
  font-size: 1rem;
}

/* Modifier */
.hero__button--large {
  font-size: 1.25rem;
  padding: 15px 40px;
}

 

• Block (`hero`) : Hero 섹션 전체 > 레이아웃
• Element (`hero__title`, `hero__button`) : Hero 섹션의 내부 요소 > 컴포넌트 내부 요소
• Modifier (`hero__button--large`) : 큰 버튼 변형 > 상태, 크기, 변형

또 다른 예

<div class="form form--large">
  <label class="form__label">Name</label>
  <input type="text" class="form__input">
  <button class="form__button form__button--disabled">Submit</button>
</div>

 

BEM의 장점

• 가독성 : 클래스 이름만 보고 어떤 요소인지 쉽게 파악 가능
• 재사용성 : 동일한 Block이나 Element를 다양한 Modifier로 쉽게 재활용
• 유지보수성 : CSS 충돌 방지, 특정 컴포넌트만 수정 가능
• 확장성 : 새로운 상태(Modifier)를 추가하여 기능 확장 가능
• 명확성 : 코드가 직관적이며 협업에 유리

 

BEM 사용 시 주의할 점

• 너무 긴 네이밍 금지 : 불필요하게 긴 클래스는 피하고, 의미가 명확하도록 간결하게 작성
• 의미 없는 Modifier 남용 금지 : Modifier는 꼭 필요할 때만 사용
• Element는 Block에 종속적이어야 함 : 독립적으로 사용하지 않음

 

BEM vs 기존 css의 차이

비교 항목	기존 CSS	BEM
네이밍 규칙	자유롭고 비일관적	일관되고 체계적
유지보수성	낮음 (충돌 가능성 높음)	높음 (명확한 구조)
재사용성	제한적	높은 (Modifier 사용)
CSS 충돌 가능성	높음	거의 없음

 

결론 - BEM을 사용하는 이유

• 명확한 규칙으로 CSS를 체계적으로 관리
• 프로젝트 규모가 커질수록 BEM은 유지보수에 큰 도움이 됨
• 협업에서 코드의 일관성과 가독성을 유지하는 데 매우 효과적

BEM은 CSS 뿐만 아니라, JavaScript와 함께 컴포넌트 기반 개발(React, Vue)에서도 널리 사용됨

 

---

BEM의 네이밍 규칙을 반드시 100% 따라야할까?

BEM 규칙을 유연하게 적용하는 방법

1. 복잡한 구조는 단순하게

• `block__element__sub-element`처럼 지나치게 깊은 네이밍은 피하는 것이 좋음
• 요소의 구조가 너무 복잡해지면 새로운 Block으로 분리하는 것을 고려

<!-- 너무 깊은 구조 (비효율적) -->
<div class="form__group__input__label"></div>

<!-- 더 깔끔한 구조 -->
<div class="form-group">
  <label class="form-group__label"></label>
  <input class="form-group__input">
</div>

2. Element 생략 가능

• 작은 프로젝트나 간단한 컴포넌트에서는 Element를 생략하고 Block + Modifier만 사용해도 됨

<!-- Element를 생략하고 Modifier만 사용 -->
<button class="btn btn--large">Click Me</button>

3. Modifier에 `is-` 또는 `has-` 같은 접두사 사용

• 상태나 동작을 나타내는 Modifier는 `is-active`, `has-error`와 같은 방식으로 네이밍하는 경우가 많음

<div class="card card--highlight is-open"></div>
<input class="input has-error">

4. 팀/프로젝트에 맞는 규칙 설정

• 팀 내부에서 BEM 변형 규칙을 정하고, 프로젝트에서 일관성 있게 사용

<!-- 표준 BEM -->
<div class="nav__item nav__item--active"></div>

<!-- 변형 BEM -->
<div class="nav-item nav-item--active"></div>

 

BEM을 완벽하게 따르지 않아도 되는 경우

• 소규모 프로젝트 : 코드가 간단한 경우, 굳이 BEM의 복잡한 구조가 필요하지 않음
• 단일 페이지 : 페이지가 적고 스타일이 반복되지 않는 경우에는 기본적인 클래스 사용만으로 충분
• 실험적/프로토타입 프로젝트 : 빠르게 개발하는 상황에서는 간단하게 Block만 사용하고 나중에 구조를 잡아도 됨

 

BEM을 따라야 하는 경우

• 대규모 프로젝트 : 유지보수가 필요한 경우, BEM의 명확한 구조가 장점으로 작용
• 협업 프로젝트 : 여러 개발자가 동시에 작업하는 경우, 통일된 네이밍 규칙이 필수
• 재사용 가능한 컴포넌트 : 컴포넌트를 여러 곳에서 재사용해야 한다면 BEM이 효율적

 

BEM은 규칙이 아닌 도구

목표는 네이밍이 일관되고 명확하게 유지되는 것이지, 규칙 자체를 맹목적으로 따르는 것이 아닙니다.

• 규칙을 지키는 것보다 중요한 것은 코드의 가독성과 유지보수성입니다.
• 프로젝트에 맞는 최적의 방식을 선택하는 것이 더 중요합니다.