class 속성의 작명법_ BEM

BEM (Block Element Modifier)

 

▶요소__일부분 (a__b)

underscore(lodash)로 요소의 일부분이라는것을 나타내줌

 

ex)

<div class="container">

           <div class="name"> 

<div class="item">

           <div class="name"> 

                       ↓

<div class="container">

           <div class="container__name"> 

<div class="item">

           <div class="item__name"> 

 

 

 

 

▶요소--상태 (a--b)

hyphen(dash)로 요소의 상태를 나타냄

ex)

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

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

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

                       ↓

<div class="btn btn--primary"></div>

<div class="btn btn--success"></div>

<div class="btn btn--error"></div>