✔ BEM 방법론이란?
BEM 방법론이란 CSS를 효율적으로 작성할 수 있도록 도와주는 규칙이다. 쉬운 유지보수, 코드의 재사용, 확장성, 직관적인 네이밍을 목표로 한다.
B(Block), E(Element), M(Modifier)로 구조를 나누어서 클래스 이름을 적용해 주는 것이 기본적인 규칙이다.
✔ Block
- 요소를 담고 있는 컨테이너
- 클래스의 어근을 형성하고 맨 앞에 위치 (e.g. class="header")
✔ Element
- 블럭 속의 조각들
__로 연결하여 블럭 다음에 위치
✔ Modifier
- 특정 요소의 기능 또는 스타일을 수정
- 요소 또는 블럭 다음에
--으로 연결하여 표시 - 반복되는 클래스를 만들거나 같은 스타일을 반복하지 않는다.
(e.g. @extend를 활용하거나 상속을 받을 수 있도록 구조 정리) - boolean type과 key-value type으로 정리
- boolean type:form__button--disabled
- key-value type:form__butto--color-red
✔ 결론
block__element--modifier의 형태를 가진다.- 각 태그에 하나의 클래스만을 사용해야 한다.
- 클래스만을 활용하여 구조화하는 방법이다.
실제로 내 홈페이지를 BEM 방법론을 활용해 변경해보니 훨씬 코드의 가독성이 및 유지보수가 용이한 것을 확인할 수 있었다.
