[CSS 방법론] BEM 방식

 

BEM ( Block, Element, Modifier )

1. 목적 또는 기능을 전달한다.
2. 구성 요소의 구조를 전달한다.
3. 선택자 특이성을 항상 낮은 수준으로 유지한다.

 

 

 

B (Block), 블록 : 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의

E (Element), 요소 : 구성 요소 안쪽에는 하나 또는 그 이상의 요소가 있을 수 있다.

M (Modifier), 변경자 : 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있다. 

 

---

 

Block

• 독립적인 의미를 가지는 추상화된 컴포넌트
• 환경에 영향을 받으면 안된다. (e.g. margin이나 position 금지)
• Block을 재사용하거나 위치를 변경하는 등 Block의 독립성을 보장해야 한다.
• Block은 서로 중첩해서 사용할 수 있으며, 여러번 중첩도 가능하다.

 

 

Element

• 블록의 구성요소
• 자신이 속한 Block 내에서만 의미를 가지기 때문에 Block에 의존적
• Block이 전체라면, Element들은 조각을 일컫는다. 
• 해당 Element는 두 개의 __로 표시한다.
  • 👉 기존 Block 이름 자체에 하이픈 및 언더바가 사용될 수 있기 때문이다.
• Element는 서로 중첩할 수 있다.
  • 👉 Block의 일부분이므로 다른 Element의 부분으로 사용할 수 없다.
• Block에는 Element가 없을 수도 있다.(선택사항)
• Element의 Element로 사용하지 않는다.

 

 

Modifier

• Block이나 Element의 형태. 
  • 👉 모양(color, size...), 상태(focusing, disable...), 행동(showing, enable...) 등을 정의
• 생김새가 다르거나 다르게 동작하는 Block이나 Element를 만들 때, 추가하는 방식으로 사용
• Block에 바로 붙여서 사용할 수도 있고, Block의 Element에 붙여서 사용할 수도 있다.
• 중요한건 항상 Block의 일부여야 하며, 단독으로 사용해서는 안된다.

 

 

 

 

 

---

 

 

 

BEM을 억지로 사용할 필요는 없다.

BEM 기법은 언제 어떤 것이 연관성 있게 묶였는가를 파악하는 것이다.

중요한 것은, 부모-자식 사이에서 특정한 css를 유지하는지, 우연히 부모-자식 관계인건지 꼭 확인해야 한다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

BEM에서 사용해 볼만한 접두사

타입	접두사	예시	설명
Component	c-	c-card c-checklist	독립적으로 재사용 가능한 요소입니다.
Layout	l-	l-grid l-container	컴포넌트를 배치하고, 레이아웃의 용도로 사용합니다.
Helpers	h-	h-show h-hide	유틸적인 용도로 사용 가능하며, 종종 !important를 사용해 특수성을 높일 수 있습니다. 일반적으로 위치 지정 또는 가시성을 위한 목적으로만 사용합니다.
States	is- has-	is-visible has-loaded	컴포넌트가 가질 수 있는 상태를 나타냅니다.
JS Hooks	js-	js-tab-switcher	자바스크립트에 의해 요소가 동작될 수 있음을 의미합니다. 이는 스타일이 아닌, 자바스크립트만을 위한 네임스페이스입니다.

 

 

 

 

 

 

 

---

참고 :

https://naradesign.github.io/bem-by-example.html

https://nohack.tistory.com/53