BEM(Block Element Modifier)
CSS 방법론에 대하여 사람마다 다르고 사용하는 규칙 또한 다른다 여러 방법론 중에서 하나로 BEM을 조사해서 간단하게 서술해 보았다.
CSS 방법론은 쉽게 유지보수가 가능하게 하고, 재사용 할 수 있도록 구현하며, 쉽게 확장가능하게 하는 공통의 목적을 가지고 있다.작명규칙(Naming Convention)개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다. 소문자, 숫자 만을 이용해서 작명한다. 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.
블록(Block)
- 재사용 할 수있는 기능적으로 독립적인 페이지 구성 요소. HTML에서 블록은 class 속성으로 표시된다.
형태(red, big)가 아닌 목적(menu, button)에 맞게 결정해야 한다. - 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.
태그, id 선택자를 사용하면 안된다. 블록은 서로 중첩해서 작성 할 수 있다.
예) header, menu, search-form
요소(Element)
- 블록안에서 특정 기능을 담당하는 부분
block__element 형태로 사용 (더블 언더바)
형태(red, big)가 아닌 목적(item, text, title)에 맞게 결정해야 한다. - 요소는 중첩해서 작성 할 수 있다.
- 요소는 블록의 부분으로만 사용 할 수 있고 다른 요소의 부분으로 사용할 수 없다.
- 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉 블록안에 요소가 없을 수도 있다.
예) menu__item, header__title
수식어(Modifier) or 변환자
- 블록이나 요소의 모양(color, size..), 상태(disabled, checked..)를 정의한다.
block__element — modifier, block — modifier 형태로 사용(더블 하이픈) - 수식어의 블리언 타입과 키-벨류 타입이 있다.
- 블리언 타입 : 수식어가 있으면 값이 true 라고 가정한다.
(form__button — disabled) 키 - 벨류 타입 : 키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
- 블리언 타입 : 수식어가 있으면 값이 true 라고 가정한다.
- 수식어는 단독으로 사용할 수 없다. 즉 기본 블록과 요소에 추가하여 사용해야 한다.
<div class="header">
<div class="search-form header__search-form"></div>
</div>
BEM에 대해서 알아보고 직접 구현을 해보면서 느꼈던 점은 다소 복잡한 클래스 명이지만, 실제로 나중에 클래스명만 보더라도 이게 어떤 용도이고 어떤 형태일지가 그려졌다. 그리고 어짜피 네이밍은 어려운데, 그나마 규칙을 정하고 블록, 요소, 수식어의 목적을 생각하다보니 조금은 네이밍이 수월해졌다.