[CSS] BEM 방법론
css를 작성하면서 골치 아팠던 부분이 클래스에 이름을 짓는 일이였다.
요소에 스타일을 적용하는 부분보다 네이밍에 더 오랜 시간을 들이지 않았나 싶다.
기본 1시간은 걸린듯..? 어떤 특성을 갖고 있는 요소인지 한 눈에 알아볼 수 있도록 직관적인 이름을 지어야 한다는 강박이 나를 힘들게 했다.
특히 영어에 취약한 나.. 단어 하나하나 영어번역기를 돌리고 있는 한심한 자신을 발견할 수 있었다.
그러다 보니 정작 중요한 실습은 뒷전으로 밀리는 현상이 발생하고 말았다.
이 고통의 굴레에서 벗어나고자 이 글을 작성하게 되었다.
찾아보니 네이밍을 하는 여러 방법론들 중에 크게 세 가지가 존재하였다.
SMACSS, BEM, OOCSS.
나는 직관적인 작명을 선호하였기에 BEM을 채택하였다.
BEM
BEM은 Block, Element, Modifer의 줄인 말로 일종의 네이밍 컨벤션이다.
Block
블록은 기능적으로 독립되어 재사용될 수 있는 컴포넌트이다.
원하는 이름을 표기하면 되고 메뉴, 버튼, 헤더 등이 블록이 될 수 있다.
여기서 이 클래스의 이름을 정의할 때는, 해당 Block의 목적을 기술해야 하며,
이 Block 자체의 형태 등을 고려하지는 않는다.
또한 이 Block은 환경에 영향을 받으면 안되는데 이를테면, margin을 넣거나 position으로 top, left 값을 조절하는 등 여백이나 위치를 설정할 수 없다.
이를 통해, 블록을 재사용하거나 위치를 변경하는 등 블록의 독립성을 보장할 수 있다.
Element(요소)
요소는 블록에서 분리되어 사용할 수 없는, 블록의 일부분이다.
소속 블록 이름 + 두개의 언더스코어 + 요소 이름으로 표기하며 메뉴의 각 항목, 버튼의 아이콘 등이 요소가 될 수 있다.
여기서 식별자를 두 개의 언더스코어로 표기하는 이유는, 기존 블록의 이름 자체에 하이픈 및 언더바가 사용될 수 있으므로, 기존 네이밍과 혼동하지 않도록 두 개로 표기해서 가독성을 살리기 위함이다.
Modifier(속성)
속성은 블록과 요소의 모양, 행동, 상태 등을 정의하는 객체이다.
디자인이 적용될 블록 이름 + 두 개의 하이픈 + 디자인 특성으로 표기하며 버튼이 클릭되었을 때의 상태, 메뉴가 활성화되었을 때의 상태 등이 속성이 될 수 있다.
블록에 바로 붙여서 사용할 수도 있고, 블록의 요소에 붙여서 길게 사용할 수도 있는데 여기서 중요한 건 항상 블록의 일부여야 하며, 단독으로 사용해서는 안된다.
속성에는 boolean 타입과 key-value 타입이 존재한다.
1.Boolean
참/거짓, 즉 토글되는 두 가지의 상태값이 있을 때 사용되는데
값이 상관 없을 때는 disabled로 표현된다.
사용 예시)
tab__item--focused
search-form__buton--disabled
2.Key-Value
속성의 값이 중요할 때 사용된다.
사용 예시) title--color-red
좋은 네이밍을 만들기 위한 규칙들
-
한 요소는 하이픈으로 연결
-
영어 소문자만 사용
카멜 케이스 등은 사용하지 않는다. -
숫자는 확장성을 고려할 것
1, 2와 같은 한자리 정수는 사용하지 않으며 01, 02와 같이 사용을 권장한다.
앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문이다. -
네이밍 조합은 형태-의미-순서-상태 순으로 작성
-
class를 사용할 것
레이아웃을 제외한 id에는 스타일을 지정하지 않는다. -
언더스코어는 파일, 폴더, 이미지 등에 사용
장점
직관적: 모듈을 분리하여 표현하므로 한 눈에 알아볼 수 있는 체계적인 구조를 가지고 있다.
유지보수: 새로운 모듈추가 및 변경에 대해 코드 일부를 수정하여 유연한 대처가 가능하다.
협업 용이 : 명확한 지침을 기반으로 이름을 정의하기에 협업 규칙으로 사용함에 적합하다.
단점
길이: 세부사항으로 들어갈수록 표현이 길어지고 복잡해 질 수 있어 가독성이 떨어질 수 있다.
레이아웃 예약어(NHN 코딩 컨벤션 문서 참조)
#wrapper - 페이지 전체 영역
#header - 머리글 영역
#container - 본문 영역
#content - 주요컨텐츠 영역
#footer - 바닥글 영역
#팝업 문서의 레이아웃 약속어는 앞에 'pop_'을 조합하여 사용
네이밍 단어집
상태별 접미사
상태변화 - _on / _off / _over / _hit / _focus
위치변화 - _top / _mid / _bot / _left / _right
순서변화 - _fst / _lst
이전/다음 - _prev / _next
사실 css에서 모든 bem을 적용하지는 않는다고 한다.
네이밍에 기본적인 규칙은 따로 없는 것 같다.
회사나 개인에 따라 다르게 적용하므로 본인에게 적합한 규칙을 적용해 일관적으로 사용하는 습관을 길러야겠다.
참고 자료
