회사에서 BEM을 사용한다고 말씀해주셨는데, 어렴풋이 알지만
정확히 설명할 수 없어 제대로 공부하고 정리해보았다!
🔎 CSS 방법론?
CSS 방법론은 간단히 얘기하면 CSS를 사용하기 위해 어떤 방식으로 클래스 네임을 사용할 지에 대한 이야기이다.
대표적으로 3가지 방법론이 있는데
- BEM(Block Element Modifier)
- OOCSS(Object Oriented CSS)
- SMA CSS(Scalable and Modular Architecture for CSS)
이 중 현재 사용하고 있는 BEM에 대해 공부해보았다.
1. BEM이란?
BEM은 CSS 방법론 중 하나로, Block, Element, Modifier의 약자이다.
🔎 BEM의 특징
- 작명을 할 때, 의미가 있는 네이밍을 지향한다.
- ID, 태그 이름 등 클래스 선택자 이외의 선택자 사용을 제한한다.
//좋은 예시
.header{width:100%}
.header .header__logo{background-color: black}
.header .header__logo--dark{background-color:white}
//나쁜 예시
h2{width:100%}//다른 선택자 사용
h2 .header_lg{background-color: black}//약어 사용으로 네이밍이 직관적이지 않음
h2 #lg-bl{background-color:white}
👍 BEM의 장점
- 목표 또는 기능을 직관적으로 파악 할 수 있다.
- CSS만으로 구조를 파악할 수 있다.
- SASS,SCSS와 사용하기 편하다.
- 재사용이 편리하다.
→ 이러한 장점들 때문에 대형 프로젝트에서 많이 채택되는 거 같다.
2. BEM의 구성 요소
BEM은 Block, Element, Modifier로 구성되어있다.
.header__item--active{color: blue;}
위 코드에서 header는 Block, item은 Element, active는 Modifier이다.
2-1. Block
UI적으로 의미있는 부분으로, 재사용이 가능한 페이지 내에 독립적인 개체를 뜻한다.
Block은 서로 상호작용하거나 중첩은 될 수 있지만, Block간에 우선순위나 계층구조는 없다.
🔖 네이밍 규칙
.block소문자 영단어, 숫자,-(대시) 로 구성된다.
클래스이름에 두 단어가 붙을 경우 -로 구분하거나 뒷단어의 첫글자를 대문자로 써 구분한다.
🖥️ 특징
- 모든 DOM 노드에 사용할 수 있다.
- CSS에서 사용시, 태그 이름이나 ID는 사용하지 않는다
2-2. Element
Block과 연결되어있는 개체로 어떤 역할을 하는 지 의미을 가지고 있다.
🔖 네이밍 규칙
.block__element소문자 영단어, 숫자,-(대시), _ _(언더바 2개) 로 구성된다.
블록이름에 언더바 2개로 요소이름을 붙여 block__element로 만든다
🖥️ 특징
- 모든 DOM 노드에 사용할 수 있다.
- block과 연결된 개체이기 때문에 단독으로 사용할 수 없다.
2-3. Modifier
block이나 element에 변경된 모양, 동작, 상태를 나타낸다.
🔖 네이밍 규칙
.block__element--modifier소문자 영단어, 숫자,-(대시), --(대시 2개) 로 구성된다.
block 혹은 element 뒤에 대시 2개로 요소이름을 붙여 block--mod, block__element--mod로 만든다
🖥️ 특징
- Block,Element에 추가하는 클래스 이름으로 단독으로 사용할 수 없다
- 상태가 변경되는 요소에만 추가해야 한다.
출처
BEM — Block Element Modifier - https://getbem.com/