HTML 클래스 작명법

 

BEM(Block Element Modifier)

 

<!-- 예시1 -->
<div class="container">
  <div class="name"></div>
  <div class="item">
    <div class="name"></div>
  </div>
</div>

<!-- 예시1 작명법 사용 -->
<div class="container">
  <div class="container__name"></div>
  <div class="item">
    <div class="item__name"></div>
  </div>
</div>

<!-- 예시2 -->
<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>

<!-- 예시2 작명법 사용 -->
<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>

 

HTML 클래스 속성의 작명법

- BEM은 CSS 제작 방법론이다

 

요소__일부분 - Underscore(Lodash) 기호로 요소의 일부분을 표시

요소--상태 - Hyphen(Dash) 기호로 요소의 상태를 표시

 

- 장점 -

CSS 선택자를 사용할때 HTML 구조를 확인하지 않아도 이해하기가 쉽다

클래스명의 중복을 방지할 수 있으며 직관적이다