- BEM이란?
Class 이름을 짓는 방법론
Block(블럭), Element(요소), Modifier(수식어)를 이용해서 클래스 이름을 짓는 것이다.
ex) 클래스 이름이 .header__navigation--navi-text 라면,
header가 Block
navigation은 Element
navi-text는 Modifier 가 된다.
BEM 방법론에서는
'어떻게 보이는가'가 아닌, '어떤 목적인가'에 따라 이름을 짓는다.
에러 메세지를 띄우는 요소의 클래스라면 .red가 아닌, .error라고 이름을 짓는다.
이름을 연결할 때는 하이픈 하나만 써서 연결한다.
- Block
재사용 가능하며 기능적으로 독립적인 페이지 컴포넌트
독립적으로 떼어서 어딘가에 쓸 수 있는 단위
예를 들어 .Logo라는 클래스가 있다면 이 요소는 어딘가에 종속되지 않고
헤더, 푸터 콘텐츠 등등 어디에도 쓰일 수 있다.
블럭은 블럭을 감쌀 수 있다.
ex) .header > .logo
header라는 블럭 안에 .logo라는 블럭이 들어간 형태
- Element
엘레먼트는 블럭을 구성하는 단위
블럭은 독립적인 반면, 엘리먼트는 의존적인 형태이다.
자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어 독립적으로 쓸 수 없다.
엘리먼트 또한 중첩이 가능하다.
단, 엘리먼트 안에 엘리먼트가 있어도 하위 엘리먼트로 보지 않고 블럭의 엘리먼트로 본다.
- Modifier
모디파이어는 블럭이나 엘리먼트의 속성을 담당한다.
생김새가 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용한다.
ex) tab__item--focused (여러개 탭 엘리먼트 중에서 포커스 된 것)
이렇게 작성된 것을 불리언(boolean) 타입이라고 하는데 그 값이 true라고 가정한다.
또 다른 형태로는 key-value 타입이 있다. 하이픈으로 성질-내용을 작성한다.
ex) title--color-gray / form-login--theme-normal
