BEM(Block Element Modifier) 방법론

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

 

BEM은 "Block Element Modifier"의 약자로, 웹 개발에서 CSS를 구조화하고 유지보수를 쉽게하기 위한 방법론이다. 이 방법론은 클래스 이름을 정하는 규칙을 제시하여 코드의 가독성을 높이고 재사용성을 강화합니다. BEM은 다음과 같이 세 가지 주요 구성 요소로 이루어져 있다.

 

1. Block (블록):

• 블록은 독립적으로 의미 있는 부분을 나타낸다. 예를 들어, 헤더, 메뉴, 버튼은 모두 블록이 될 수 있다.
• 클래스 이름은 보통 이 블록의 역할을 나타내는 단어로 지정된다.

<div class="header">...</div> 
<div class="menu">...</div> 
<button class="button">...</button>

 

2. Element (엘리먼트):

• 엘리먼트는 블록 안에서 특정 기능을 수행하는 부분을 나타낸다. 블록에 종속적이며 블록 내에서만 의미가 있는 것들이 엘리먼트가 된다.
• 엘리먼트의 클래스 이름은 블록 이름 뒤에 두 개의 밑줄(__)을 붙인 후 엘리먼트의 역할을 나타내는 단어를 추가한다.   

<div class="header"> 
    <div class="header__logo">...</div> 
    <div class="header__nav">...</div> 
</div>

 

3. Modifier (모디파이어):

• 모디파이어는 블록이나 엘리먼트의 속성을 변경하는 데 사용된다. 모디파이어의 클래스 이름은 블록 또는 엘리먼트 이름 뒤에 두 개의 대시(--)를 붙인 후 모디파이어의 역할을 나타내는 단어를 추가한다.
• 모디파이어는 선택적으로 사용되며, 블록 또는 엘리먼트의 스타일을 수정하거나 상태를 나타내는 데 유용하다.

<button class="button button--primary">Primary Button</button> 
<button class="button button--disabled">Disabled Button</button>

 

이러한 구성으로 인해 클래스 이름은 의미를 가지며, 요소 간의 관계를 명확히 파악할 수 있다. 이는 코드를 이해하고 유지보수하기 쉽게 만들어준다. BEM은 가독성과 확장성을 강화하여 대규모 프로젝트에서 특히 효과적이다.