HTML-BEM

프망생·2025년 3월 22일

HTML

목록 보기
1/1

BEM (Block Element Modifier)

HTML 클래스 속성의 작명법

요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시
요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

BEM 미적용 코드

<div class="container">
  <div class="name"></div>
  <div class="item">
    <div class="name"</div>
  </div>
</div>

<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>

BEM 적용 코드

<div class="container">
  <div class="container__name"></div>
  <div class="item">
    <div class="item__name"</div>
  </div>
</div>

<div class="btn--primary"></div>
<div class="btn--success"></div>
<div class="btn--error"></div>
profile
안녕하세요. 프론트엔드 지망생입니다.

0개의 댓글