1. BEM (Block-Element-Modifier)

구조: block__element--modifier

의미:

- block -> 독립적인 컴포넌트 단위
- element -> block 안의 구성 요소
- modifier -> 상태/변형

예시

<div class="card">
  <h2 class="card__title">제목</h2>
  <p class="card__description card__description--highlight">내용</p>
</div>

2. CamelCase / PascalCase

React 컴포넌트와 맞춰 쓸 때

구조: myComponent, MyComponentTitle

예시

<div className="todoItem">
  <p className="todoItemText">할 일</p>
</div>

3. Kebab-case (소문자-하이픈)

가장 기본적이고 읽기 쉬움

구조: block-element-modifier

예시

<div class="todo-item">
  <p class="todo-item-text todo-item-text--highlight">할 일</p>
</div>