[css] BEM 정리

BEM이란

BEM은 css의 방법론중의 하나다. Block, Element, Modifier를 의미한다. id명에는 사용하지 않고 class명만 사용한다.

Block__Element--Modifier

Block

독립적으로 자체적인 의미를 가진 개체이다.

ex) 'header', 'container', 'menu', 'checkbox', 'input'

Element

블록의 일부로서 독립적인 의미를 가지지 않고 그 블록과 의미적으로 연결되어 있다.

ex) 'menu item', 'list item', 'checkbox caption', 'header title'

Modifier

블록이나 요소의 외관이나 동작을 변형하는데 사용한다.

ex) 'disabled', 'highlighted', 'checked', 'fixed', 'size big', 'color yellow'

특징

1. 블록에 모듈성을 제공해 계단식으로 발생할 수 있는 문제들을 피할 수 있다.
2. 독립적인 블록들을 다양한 방식으로 구성하고 재사용하여 유지보수 해야할 코드양을 줄일 수 있다.
3. 단순하고 이해하기 쉬운 견고한 구조를 만들 수 있다.

주의사항

중첩이 많아지면 클래스네임이 지나치게 길어지는 일이 발생할 수 있는데 크게는 html의 재구조화 작게는 최상위 블록과의 관계만을 표현하여 해결할 수 있다. 신중하게 판단하여 규칙에 조정을 하여 해결하는 방법도 있다.

마무리

BEM이외에도 다른 방법론들이 있고 이것이 완벽한 것도 아니기에 너무 빡빡하게 사용할 필요는 없지만 어떤 작업을 할 때 가이드라인이 있고 없고는 차이가 크기 때문에 많이 생각해보고 사용하면 좋다고 생각한다.