BEM이란?
BEM이란 Block Element Modifier의 줄임말로, CSS 구조화, 네이밍 컨벤션과 관련된 방법론이다. BEM 방법론을 이용하여 css 코드를 작성하면 훨씬 구조화되고, 통일성 높은 코드를 작성할 수 있다. BEM은 이름에서 알 수 있듯이 Block, Element, Modifier를 3가지를 이용하여 클래스명 만들고 이를 사용하여 css를 적용하도록 한다.
Block
Block은 하나의 스스로도 의미를 가지는 독립적인 존재를 가르킨다. Block은 다른 block에 nested 되거나 상호작용할 수 있지만, 의미상으로는 선행이나 계층 구조를 지니지 않는다. Block 클래스 명은 알파벳, 숫자, '-'를 포함할 수 있다. ex) block
Element
Element는 Block의 일부이며, 독립적인 의미를 지니지 못한다. Element 클래스명은 알파벳, 숫자, '-', _'룰 포함 할 수 있으며, 의존하는 block의 이름과 2개의 '_'를 prefix로 가진다. ex) block__elem
Modifier
Modifiersms Block이나 Element의 상태나 행동을 의미한다. 예를 들어 버튼이 비활성화된 경우 modifier로 disabled를 쓸 수 있다. Modifier 클래스명은 알파벳, 숫자, '-', '_'를 포함할 수 있으며, 앞에 block이나 element와 두 개의 '-'를 prefix로 가진다. ex) block__element--mod
왜 BEM을 사용해야 할까?
CSS는 두가지 속성이 있는데, 바로 Inheritance(상속)과 specificity(특수성)이다. CSS는 이름에서 볼 수 있듯이(cascading: 폭포처럼 흐른다) 상위 계층의 스타일을 하위 계층에서 상속받아 사용한다. 또한 CSS에서 selector이 더 구체적일 수록 그 스타일을 적용 우선 순위가 높아진다. 이들은 장점도 있지만, 단점을 가진다. 첫번째로, css의 상속은 끝이 없다. 스코프가 존재하지 않기 때문에 항상 조상의 style을 상속받게 되며, 이는 계층 구조가 깊어질수록 복잡해진다. 또한 특수성때문에 여러 스타일이 충돌하는 경우 어떤 스타일이 적용되는지 확인하기가 어려워진다.(특히 !important가 있으면 더욱)
따라서 BEM 네이밍 방법론을 사용하여 스코프와 유사한 방식을 사용하여 element에 유니크한 스타일을 제공하며 상속을 방지할 수 있으며, 스타일 충돌을 줄일 수 있다.