CSS BEM 방법론

BEM (Block Element Modifier)

 

작명규칙

1. 소문자, 숫자만을 이용하여 작명한다.

2. 여러단어의 조합은 하이폰으로 연결하여 작명한다. (sub-header__title--color-red)

3. 기본적으로 id (label for에서는 사용), 태그 선택자를 사용하지 않고 class 만을 사용한다. (태그 선택자는 성능 저하를 유발하기 때문에 방법론이 아니더라도 사용을 하지 않는 것이 좋다)

Block

1. Block은 재 사용할 수 있고, 독립적인 구성요소여야 한다. (header, footer, nav, logo 등)

2. 형태 (small, big, red, blue)가 아닌 목적 (error, menu, button, success)에 맞게 결정해야 한다.

3. 환경에 영향 받지 않아야 한다. (여백, position 등을 설정하면 안된다는 뜻이며, 마진 혹은 패딩 등의 여백을 불가피하게 주는 경우 mt, bt 등 기존처럼 추가 클래스를 준다)

4. 서로 중첩해서 작성할 수 있으며, Block이 Block을 감쌀 수 있다.

5. Block 안에 Element가 없어도 상관없다.

6. Block 과 Element 가 같이 있어도 상관 없다. (아래 예시 참고)

1 2 3 4 <div class=”header”> // header === block <div class=”search-form header__search-form”></div> // search-form === block, header__search-form === element </div>

 

Element

1. Block 안에서 특정 기능을 담당하는 부분으로, 자신의 속한 블록 내에서만 의미를 가진다. 블럭 안에서 떼어다 다른 곳에 사용할 수 없다. (header > header__title 요소를 nav > header__title 에 가져다 쓰면 안된다)

2. Block과 마찬가지로, 형태가 아닌 목적에 맞게 결정해야 한다.

3. block__element 형태로 사용한다. (더블 언더바)

4. 서로 중첩해서 작성할 수 있다.

 

Modifiter

1. Block or Element의 모양 (color, size), 상태 (disabled, checked, active)를 정의한다.

2. block__element--modifiter && block--modifier 형태로 사용 (더블 하이픈)

3. Modifier 는 불리언 타입 & 키-벨류 타입으로 표시할 수 있다.

4. 불리언 타입 : header__title--disabled, 키 - 벨류 타입 : header__title--color-red

5. Modifier 는 단독으로 사용할 수 없으며, Block 혹은 Element에 추가하여 사용해야 한다.

 

State

• 상태를 나타내는 스타일로 Hidden, expend, active, hover 등의 상태에서 사용

• Class명에 suffix “is-” 또는 “s-”를 붙여서 사용 (is-active, is-hidden)