[CSS] BEM 방법론

👀 BEM 방법론이란?

BEM 방법론이란 CSS를 효율적으로 작성할 수 있도록 도와주는 규칙이다. 쉬운 유지보수, 코드의 재사용, 확장성, 직관적인 네이밍을 목표로 한다.

B(Block), E(Element), M(Modifier)로 구조를 나누어서 클래스 이름을 적용해 주는 것이 기본적인 규칙이다.

✔ Block

1. 요소를 담고 있는 컨테이너
2. 클래스의 어근을 형성하고 맨 앞에 위치 (e.g. class="header")

✔ Element

1. 블럭 속의 조각들
2. __로 연결하여 블럭 다음에 위치

✔ Modifier

1. 특정 요소의 기능 또는 스타일을 수정
2. 요소 또는 블럭 다음에 --으로 연결하여 표시
3. 반복되는 클래스를 만들거나 같은 스타일을 반복하지 않는다.
• e.g. @extend를 활용하거나 상속을 받을 수 있도록 구조 정리
4. boolean type과 key-value type으로 정리
• boolean type: form__button--disabled
• key-value type: form__butto--color-red

✔ 결론

1. block__element--modifier의 형태를 가진다.
2. 각 태그에 하나의 클래스만을 사용해야 한다.
3. 클래스만을 활용하여 구조화하는 방법이다.

실제로 내 홈페이지를 BEM 방법론을 활용해 변경해보니 훨씬 코드의 가독성이 및 유지보수가 용이한 것을 확인할 수 있었다.

👍 참고 사이트

1. BEM방법론