BEM - CSS 방법론

🎈BEM 이란?(Block , Element , Modifier)

* CSS 코드를 구조화하고 조직화 하는 방법론이다. 코드의 유지 보수성, 가독성 및 확장성을 향상시키기 위해 명명 규칙 및 CSS 아키텍처에 대한 모듈식 접근 방식을 제공한다. ( HTML클래스 속성의 작명법 )

BEM은 러시아 검색 엔진 회사인 Yandex가 소개했으며, 웹 개발자들 사이에서 인기를 얻었다.

🎈요소__일부분

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

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


---▶


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

🎈요소--상태

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

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


---▶


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