[CSS] BEM(Block Element Modifier)구조

BEM(Block Element Modifier)구조

BEM은 CSS 작성시 사용하는 방법론중 하나이다. 

 

장점

• 명확한 구조화: 클래스명으로 구조화를 해서 구조를 쉽게 파악 가능
• 모듈화: 각 블록을 독립적으로 스타일링, 재사용하기 용이함
• 명시성: 스타일간 충돌을 방지한다. 
• 선택자 우선순위 제어

단점

• 블록(Block), 요소(Element), 수정자(Modifier)를 명시하는 방식으로 작성되기 때문에 클래스 이름이 길어짐
• 가독성 떨어짐
• 클래스명이 복잡해지고 유지보수가 어려워질수 있음
• css 파일이 길어지고 중복 발생 가능성이 있음

---

블록 Block

페이지 전체 Element(요소)를 의미하거나 하위 Element(요소)를 감싸는 컨테이너를 의미

문자, 숫자, 대시(-)로 구성

<div class="list-container">

 

 

요소 Element

블록의 하위 요소이다. 모든 요소는 상위 블록과 연결

문자, 숫자, 대시(-) 및 밑줄(_)로 구성

<div class="box__apple"></div>

수정자 Modifier

문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다.

블럭이름--수정자이름 혹은 요소이름--수정자이름 형태로 작성

수정자의 이름이 길거나 공백이 있다면 하나의 대시를 사용한다. 블럭이름--border-black

 

 

<div class="block block--size-big">
  <div class="block__elem block__elem--mod"></div>
</div>
<div class="box box--size-small">
  <div class="box__elem box__elem--border-red"></div>
</div>