BEM 방법론 알아보기

 

 

프로젝트를 진행하거나 협업을 하게 되면 어떠한 업무든 보다 나은 방법이 없을까 고민을 하게 됩니다. 

프로젝트나 버전 관리나 유지보수 등의 이유를 고려한다면 업무에 가이드(규칙)가 있는 게 좋습니다.  물론 혼자서 업무를 진행하게 되는 상황이어도 자신만의 가이드 규칙을 정리해서 사용하는 것이 자신을 위해서도 또 업무의 효율성을 위해서도 좋습니다.

 

그래서 오늘은 CSS의 여러 방법론 중 하나이며 현재 제가 사용하고 있는 BEM 방법론에 대해 알아보려고 합니다.

💡 BEM이 도대체 뭔데?

• BEM은 Block Element Modifier의 약자
• block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능/수정)
• BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다는 점, 태그명으로도 사용하지 않음 (태그에 스타일을 매기면 마크업이 수정될 경우 스타일도 다시 손봐야 하기 때문 (의존적))
• Selector만으로도 무엇을 하는지 어디에 사용하는지 유추 가능하게 작성
• 모든 이름은 간단하고 직관적, 명료하고 유니크한 클래스명을 사용하는 것이 좋음
• 절대적으로 필요하지 않는 이상, 추가적인 클래스를 만들거나 똑같은 스타일을 반복해서 사용하지 않음 (Sass의 @extend 활용)
• 언더스코어를 두개 사용하는 이유는 하이픈이나 언더스코어를 동해 블록 이름을 구분자로 사용할 수도 있기 때문에 더블 언더스코어를 사용.

EX) 예시

.header__search p { /* 태그 변경시 전체적으로 수정이 발생하여 비효율적 */ }
.header__search--form  { /* 수정이 발생해도 무방 */ }

 

💡  BEM에 대해 조금 더 톺아보기

위에서 간략히 BEM에 대해 설명을 했지만 그래도 처음 BEM이라는 방법론을 접하신 분들은 내용이 잘 이해가 안 될 수도 있습니다. 그렇지만 너무 신경 쓰지 마세요. 조금 더 내용을 읽다 보면 자연스럽게 이해되고 실제로 코드로 적어보면 더 쉽게 이해가 되니 지금은 이런 게 있구나 하는 정도만 이해하시면 됩니다. 

가장 기본은 요소에 따라서 __(더블 언더스코어)와 --(더블 하이픈)으로 구분하여 직관적이고 명확하게 한다는 게 가장 중요한 핵심입니다.

1)  BEM : "B" = Block (전체를 감싸고 있는 블럭요소)

• 블록(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 지칭 (그루핑 요소의 가장 최상위 요소)
• 헤더, 풋터, 사이드바, 그리고 메인 콘텐츠 영역을 가지고 있다고 가정하면, 이 각각의 영역들이 블록으로 간주
• 블록 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치
• 일단 블록을 정의하면, 블록이 형성한 클래스의 어근을 맨 앞에 붙여 그 블록이 포함하는 요소들의 클래스명을 정함

 

2) BEM : "E" = Element(요소)

• 요소(element)는 블록이 포함하고 있는 한 조각, 블록을 구성하는 한 요소 단위
• 요소는 블록 요소에 대한 자식 요소 개념이기 때문에 블록 요소에 의존적인 형태
• 블록(Block)은 전체를 말하고 요소들은 그 조각들을 일컫고 각 요소는 두 개의 밑줄 표시(underscore)로 연결하여 블록 다음에 위치

EX) 기본 작성 방법

.block__element { property: value; }

.header__logo { property: value; } 
.header__tagline { property: value; }
.header__searchbar { property: value; }
.header__navigation { property: value; }

 

3) BEM : "M" = Modifiers (속성 / 수정)

• modifier은 블록 또는 요소의 속성(속성 / 수정)
• 이 속성은 블록 또는 요소의 외관이나 상태를 변화시키는 것
• 클래스명을 지을 때의 목적은 그 요소를 반복하여 재사용할 수 있게 하기 위한 것으로 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도 무방.
• 특정 요소의 스타일을 수정할 필요가 있을 때, modifier만 활용
• modifier를 구분해주기 위하요 요소 또는 블록 다음에 두 개의 하이픈(‘‐‐’)을 추가하여 modifier을 표시

EX) 기본 작성 방법

.block‐‐modifier {…} 
.block__element‐‐modifier {…}

 

✔ 일반적 방법

<form class="site-search full">
    <input type="text" class="field">
    <input type="submit" value ="search" class="button">
</form>

 

✔ BEM 방법

<form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="submit" value ="search" class="site-search__button">
</form>

 

👍 추가:  클래스명이 스크립트에서 사용되는 이름일 경우 DOM 요소와의 관계를 나타내기 위해 js-* 클래스 이름을 사용하면 조금 더 명확하고 구분이 쉬워집니다.

 

EX) 사용 예시

 js-site-navigation

 

4) BEM 구조 직접 구현해 보기

저는 해더(블록) 요소 안에 엘리먼트인 타이틀과 로고 및 검색 영역을 만들었습니다.

그 후 검색 영역 밑에 속성인 입력 요소, 검색 버튼, 검색 결과 요소를 추가 해 놓았습니다. 

 

 

BEM방법론은 마크업을 하는 사람이 가장 명확히 알 수 있어요. 처음 구조를 정의하고 그 구조에 맞게 블록, 엘리먼트, 속성 요소를 분리하여 CSS를 정의하는 게 가장 중요하다고 생각합니다. 

그리고 많은 사람들의 마크업이 다르고 구조화하는 방식이 다르기 때문에 기존적인 큰 틀은 비슷할 수 있어도 세부적인 부분은 사람마다 다를 수밖에 없다고 생각합니다. 그렇기에 본인(프로젝트 시 팀 가이드)만의 명확한 가이드가 있고 그 가이드대로 꾸준히 작업하는 게 가장 중요하다고 생각해요. 

 

💡 BEM의 장점, 단점

1) 장점

• 마크업 구조를 보지 않아도 클래스명(네임) 만으로도 마크업 구조를 쉽게 파악이 가능

2) 단점

• 클래스명이 너무나 길어지게 되는 단점
• 기존 BEM으로 마크업을 구성한 상태에서 새롭게 기능이 추가되었을 경우 클래스명 재 수정 시 네임명 수정이 불편

3) 단점을 보완하는 방법

• 최초 마크업 작성은 BEM 방법론에 맞게 작업하고 이후 추가 수정, 유지보수가 필요할 경우 멀티클래스를 활용하거나 *data- 속성을 활용하여 수정.

 

 

감사합니다