[CSS] BEM - Block, Element, Modifier
내가 재직중인 회사의 서비스에는 BEM 스타일의 코드들이 드문드문 살고있다.
해당 코드들을 레거시로 정의하고 기능 개선을 할때마다 보이면 tailwind 로 교체하는 작업들을 해주고 있지만 아직도 같이 살아 숨쉬고 있는 녀석들이다.
같이 살고 있는 녀석들인데 내가 이녀석들을 잘 모르면 안되겠지?
먼저 BEM 이라는 것은 CSS 방법론 중 하나로 클래스 네이밍 컨벤션의 일종이라고 볼 수 있다.
BEM?
BEM 은 위의 Block, Element, Modifier 3가지 요소를 말하며 해당 요소의 연결은 Block-name__Element--Modifier 로 연결한다.
Block
- 컴포넌트로써 사용할 수 있는 가장 바깥영역의 블록을 정의한다. 예를 들어 위의 사이트 이미지에서 빨간 테두리는 head block, 노란 테두리는 각각 logo block, search block, navi block 이라고 정의 할 수 있다. 물론 .head > .logo 처럼 block 의 자식으로 block 을 가질 수 있다. 컴포넌트로 사용할 수 있다는 말은 logo block 을 보자 header 에도 쓰였지만 footer 에도 들어간 것 처럼 독립적으로 재활용 할 수 있는 요소이다.
Element
- 블럭을 구성하는 단위요소이다. Element 는 block 안에서만 의미를 갖는 의미 요소이다. 예를 들어 간단하게
<form class="search-form">
<div class="search-form__content">
<input class="search-form__input" placeholder="찾으시는 취미가 있으신가요"/>
<button class="search-form__button"/>
</div>
</form>- 이런 search-form 이라는 block 에는 input , button 같은 element가 있을 수 있다. 하지만 이 요소를 블럭 밖에서 사용하기 어렵다
Modifier
- 블럭이나 엘리먼트의 속성이다. 예를들어
<div class="bottom-sticky__button--enabled">공통프로필 확인하기</div>
<div class="bottom-sticky__button--disabled">저장 후 프로필 확인 가능</div>이런식으로 위에서는 enabled 라는 modifier 로 아래는 disabled 라는 modifier 로 명명해줄 수 있다.
물론 이 코드는 우리 페이지의 실제 코드는 아니고 BEM 스타일로 이렇게 명명 할 수 있다~ 고 예시를 들어 설명해보았다.
<참고>