BEM CSS 요약

BEM란 css 클래스네임을 효과적으로 작성하는 법이라고 보면 된다.
BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다.

BEM은 block, Element, Modifier를 뜻한다.

구조는 block__Element--Modifier이다.
이름을 연결할때는 block-name과 같이 하이픈 하나만 써서 연결한다.

Block
재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 부른다.

Element
블럭은 독립적인 형태인 반면, 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른데 쓸 수 없다.

Modifier
모디파이어는 블럭이나 엘리먼트의 속성을 담당한다.

<ul class="tab">
	<li class="tab__item tab__item--focused">탭 01</li>
	<li class="tab__item">탭 02</li>
	<li class="tab__item">탭 03</li>
</ul>

위 코드에서 --focused가 수식어에 해당한다.
저렇게 작성된걸 불리언(boolean)타입이라고 하는데, 그 값이 true라고 가정하고 사용한다.

원본 출처-css 방법론 - BEM 방식