나름대로 공부한답시고 유튜브나 인터넷 강의 이것저것 보다가 BEM에 대해서 접한 적이 있다. 그때는 그냥 아 이런 거구나 하고 넘어갔었는데, 멘토/멘티 직무캠프를 하면서 BEM 구조에 대해 배우고 활용할 기회가 생겼다.
BEM 소개
BEM 구조가 뭐냐? 먼저 BEM은 Block, Element, Modifier의 약자다. 즉, 이 세가지로 구성된 이름을 짓는 것이다. 작성할 때는 Block__Element--Modifier 이런 식으로 작성하면 된다. __ 와 --로 구분을 해주는 것이다.
Block : block은 그 자체로 의미가 있는 독립적인 엔티티이다. 예를 들면 'header', 'container', 'menu' 이런 것들. 독립적인 엔티티이기 때문에 block 그 자체로 단독적으로 사용이 가능하다.
Element : element는 독립적인 의미가 있는 건 아니지만 의미상 해당 block에 연결된 일부다. 예를 들면 'menu item', 'list item', 'header title' 이런 것들이다. 작성할 때는
.menu__item { ... }이렇게 쓰면 된다. menu는 block이고 item은 element다.
Modifier : modifier는 block이나 element의 속성을 담당하며, 모양이나 행동을 변경할 때 사용한다. button을 예로 들어보자.
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #d5d5d5;
background-image: linear-gradient(#eee, #ddd);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #fff;
background: #569e3d linear-gradient(#79d858, #569e3d) repeat-x;
border-color: #4a993e;
}
.button--state-danger {
color: #900;
}BEM을 사용하여 button이라는 block에 일반 버튼과 두가지 상태의 버튼의 스타일을 지정해줬다. block--modifier-value 구문을 사용했다.
나도 BEM 구조를 제대로 잘 사용하는 건 아니지만 여기까지만 이해해도 반은 이해했다고 생각한다.
BEM의 장점
BEM이 뭔지는 이제 알겠는데 그럼 왜 굳이 BEM을 사용해서 CLASS를 명명하는 것일까? 단점도 있겠지만 우선 장점부터 살펴보자면,
- 재사용성과 유지보수 용이성 : 위에서도 언급했듯이 block은 독립적인 엔티티이기 때문에 block만 분리하여 사용이 가능하고 비슷한 디자인 패턴을 가진 요소들을 쉽게 구현하고 조합할 수 있다. 다양한 방식으로 독립적인 block을 구성하고 재사용하면 유지 관리해야 하는 CSS 코드의 양도 줄어든다.
- 가독성 향상 : BEM은 명확한 네이밍 규칙을 제공하기 때문에 클래스명 자체가 해당 요소들의 역할과 관계를 쉽게 이해할 수 있다.
- 스타일 충돌 최소화 : BEM은 스타일 충돌을 방지하기 위해 클래스명에 중첩을 많이 사용하여 전역 스타일을 오염시키지 않고 더 예측 가능하고 격리된 스타일을 적용할 수 있다.
- SASS와의 조화 : SASS의 변수와 믹스인을 활용하면 스타일 코드가 더욱 의미 있게 구성이 된다. 그리고 SASS에서 요소를 쉽게 찾을 수 있다. SASS에는 부모참조자(&)라는 걸 쓸 수 있는데, BEM구조 사용으로 클래스 네임이 길어져도 부모참조자를 활용하면 .menu 라는 block 아래에
&__list, &__title이런 식으로 작성을 할 수 있어 어떤 block의 요소인지 바로 알 수가 있다.
BEM의 단점
- 클래스명의 길이 : 아무래도 네이밍 규칙 때문에 클래스명이 길어질 수밖에 없다. 그래서 HTML만 보면 좀 지저분해보일 수 있다. 그리고 CSS 파일에 작성할 때도 긴 클래스명을 반복해서 사용해야 하기 때문에 복잡해보일 수 있다.
- 학습 곡선 : 처음에는 BEM의 네이밍 규칙과 구조에 익숙해지는 데에 시간이 걸릴 수 있다. 그리고 BEM 구조가 좀 복잡하게 느껴질 수도 있다는 생각도 든다. 계속 연습해보고 직접 해보는 방법밖에 없겠지만 익숙해지기까지 시간이 걸릴 수 있다.
- 클래스명 중복 가능성 : 클래스명 중복을 방지하기 위해 중첩된 요소들을 포함한 복합 클래스명을 사용하는데 이런 구조로 인해 불필요한 클래스명이 추가될 수 있다.
참고할만 한 링크
BEM구조에 대해서 공부하면서 참고했던 링크들이다.
클래스 네임을 생각하는 데 도움을 줄 수 있는 링크 1
클래스 네임을 생각하는 데 도움을 줄 수 있는 링크 2
예시를 통한 BEM
마치며
진작 한번 정리를 해볼걸!
BEM구조가 뭔지 이해하고 클론코딩할 때 사용했는데도 제대로 사용하지 못했다. 쓰다보니 헷갈리기도 하고 이게 맞나? 하는 생각이 들기도 하고 그랬던 기억이 난다. 지금 생각해보면 와 진짜 반만 이해했구나 싶은 생각도 들고..
다음에 또 내가 뭔가를 하게 된다면 그땐 제대로 활용하고 싶다.
