BEM 방법론

BEM(Block Element Modifier)

CSS 개발 방법론 중 하나. 클래스의 이름을 지을 때 요소에 대한 속성에 근거하는 이름으로 짓는 것
ex. state-bar__column
ex. block__element--modifier

 

ID에는 사용 불가. 오직 클래스명에만 활용 가능하다.

 

1) Block

• 전체를 감싸고 있는 블럭 요소
• header, nav, article, footer 등
• 클래스 어근을 형성하며 항상 맨 앞에 위치

2) Element

• 블럭이 포함하고 있는 한 조각
• 각 요소는 두개의 밑줄표시(__)로 블럭 다음으로 연결하여 위치시킴

3) Modifiers

• 기능
• 블럭 또는 요소의 속성으로 블럭/요소의 외관이나 상태를 변화 시키는 것

4) 장점

• 클래스명의 중복 방지
• 직관적
• 전체 DOM tree 구조를 다시 보지 않아도 됨