BEM
BEM은 Block, Element, Modifier를 뜻한다. "__"와 "--"로 구분.
BEM은 기본적으로 id를 사용하지 않고 class만 사용한다.
'어떻게 보이는가'가 아닌 '어떤 목적을 가지고 있는가'에 초점을 맞춰서 네이밍을 해야 한다.
.red가 아닌 .error로 작성한다. 이름을 연결 할 때는 block-name과 같이 하나의 하이픈을 쓴다.
Block
block은 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 말한다.
element 또는 elemet를 담고 있는 컨테이너
block은 block 내에 중첩될 수 있다.
ex) 헤더 내에 로고,검색, 메뉴 등 다른 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> boolean 타입
tab__item--focused 수식어 해당.
boolean 타입이라고 하며 그 값을 true라고 가정하고 사용한다.
key-value 타입
하이픈으로 성질-내용을 작성한다.
BEM의 장점
1) 클래스명으로 마크업 구조를 파악 할 수 있다.
=> block으로 구분되어 있기 때문에 파악이 쉬움.
2) SASS의 &와 함께 사용할 때 매우 편리하다.
3) SASS에서 요소를 찾기 쉽다.
4) SASS에서의 중첩 사용을 줄일 수 있다.
.header {
&__nav {
position: absolute;
}
&__list {
clor: red;
}
&__item {
outline: 0;
}
&__link {
color: red;
}
}BEM의 단점
클래스명이 너무 길다.
:)