CSS 네이밍 / CSS 클래스 네임 방법론 BEM 알아보기

1. BEM이란?

Block, Element, Modifier를 뜻합니다

 

보통 클래스 네임을 정할때 사용하는 방법론 중에 하나로

BEM은 기본적으로 ID를 사용하지 않고, class명만을 사용합니다.

즉, 어떤 목적인가에 포커스가 맞춰져 있습니다.

개발, 디버깅, 유지보수를 위해 가능한  한 명확하게 네이밍 하는 것이 목표입니다.

모든 것이 클래스이고 중첩된 것은 없어야 합니다.

 

2. BEM 네이밍 장점

- 목적과 기능을 명확히 전달한다
- css만으로 구조를 알 수 있다. (sass, scss와 사용하기 편하다)
- css 명시도를 항상 낮은 수준으로 유지하기 때문에 구체성으로 인한 코드의 길어짐을 방지할 수 있다.
- 높은 재사용성과 대규모 css를 효율적으로 관리할 수 있다

 

3. BEM 사용법

BEM의 class명은 구체적이고 명료하여 html 안에서도 읽기 쉬워야 하고 의미를 분명하게 전달해야 합니다.

Block (블록)	재사용이 가능한 콘텐츠 영역을 의미 네임은 한 단어로 사용하며, 만약 네이밍이 길어질경우 케밥기법(-)을 이용한다 .header .login-wrap
Element (요소)	블럭 안에 특정 기능을 수행하는 컴포넌트를 의미 (블록을 구성하는 종속적인 하위료소로서 소속된 블록에 의존적) 상황에 따라 달라지며, 두개의 밑줄__로 block 다음에 작성한다 - 형태가 아닌 목적에 맞게 결정해야 함 .red -> .errer - 선책적으로 사용 가능해야 하며 요소가 없을 수도 있다 .header__search .login__check
Modifier (수식어)	block, element의 외관이나 형태를 변화시킬 때 사용 기능은 같으나 모양이 다를 경우 사용마며, 두개의 데쉬--를 추가하여 표현한다 .header__search--hover .login__check--active