[CSS] - BEM방법론에 대해서 알아봅시다

BEM (Block Element Modifier)

BEM (Block Element Modifier) 구조에 대한 소개

 

 

html 문서를 작성해야 하는데 클래스명을 작명할 때, 클래스 이름이 겹치면 곤란하고 또 안 겹치게 하자니 정리가 안되는 상황을 겪어보신 적이 있으신가요? 이럴 땐 BEM 방법론을 적당히 사용하면 유용합니다.

 

BEM방법론 이라는 것은 위와 같은 상황의 어려움을 해결하고자 만들어진 css 방법론입니다.

물론 css 전처리기라는 것을 이용하면서 BEM방법론을 채택하면 더 효율적으로 css 파일을 관리할 수 있습니다.

 

그렇다면 BEM방법론의 구조는 어떻게 되어 있을까요?

 

 

Block__Element--Modifier 형태로 되어져 있는 BEM방법론은

 

Block을 제일 앞에 두고 Element와 Modifier는 뒤에 정렬하여 Block을 설명하는 것으로 보이게끔 작성하는 것이 특징이며 Block 뒤에 Element를 붙일 땐 앞에 underbar(_) 를 두 번, Modifier를 붙일 땐 앞에 Hyphen(-)을 두 번 붙이도록 합니다.

 

Element와 Modifier를 모두 사용하는 경우 BEM (Block__Element--Modifier) 형태로 많이 작성합니다.

 

Block

그렇다면 Block은 어떤 요소들을 Block으로 정해두면 될까요?

 

.header {

}
.aboutMe__title {

}
.aboutMe__title--dark {

}
.footer--primary {

}

 

Block은 흔히 header, section, article, footer와 같은 sementic한 태그부터, btn, logo, form... 등과 같이 재사용이 가능한 독립적인 컴포넌트 단위까지 사용이 가능합니다.

 

이 Block은 항상 문두에서 뒤에 오는 요소들에 의해 수식 받기 때문에 대부분 이런 의미가 있고,

독립적으로 사용이 가능하다는 점을 이해하며 사용합니다.

 

Element

Element는 주로 Block 뒤에서 수식하는 용으로 사용이 되며, 해당 Block 뒤에서 종속적으로 사용이 됩니다.

블럭은 독립적으로 사용이 가능하며 여기저기 붙여서 쓸 수 있지만, Element는 자신이 속한 Block 내부에서 의미를 갖게 되기 때문에 단독으로 사용되지 않습니다.

 

<section id="skills">
    <div class="skill__item1"></div>
    <input class="skill__input"></input>
    <div class="skill__item2"></div>
    <button class="skill__btn"></button>
</section>

 

위의 예시는 item1과 item2가 section 뒤에 종속되어진 느낌을 주는 예시입니다.

각각의 element요소들은 section Block의 하위요소로 개별적으로 나뉘어진 하위 요소라는 느낌을 줍니다.

각각의 요소들은 skills 내부의 아이템이나 버튼으로 보이는데, 이것들을 개별적으로 사용하진 않습니다.

 

때로는, 개별적으로 사용할 땐 BEM방법론을 적용하기 보다 개별의 요소들로 묶어두는 것이 더 깔끔해 보이기도 합니다.

 

Element 적용 예시

 

또 BEM방법론을 적용하다보면 Element를 무분별하게 길게 적용하기도 합니다.

 

<!-- 별로 좋지 않은 예시 ❌ -->
<section id="skills">
    <div class="skill__container">
    	<div class="skill__container__frontend">fbox</div>
    	<div class="skill__container__backend">bbox</div>
    	<div class="skill__container__deployment">dbox</div>
    	<div class="skill__container__version-control">vbox</div>
    	<div class="skill__container__communication">cbox</div>
    </div>
</section>

<!-- 좋은 예시 ✅ -->
<section id="skills">
    <div class="skill__container">
    	<div class="skill__frontend">fbox</div>
    	<div class="skill__backend">bbox</div>
    	<div class="skill__deployment">dbox</div>
    	<div class="skill__version-control">vbox</div>
    	<div class="skill__communication">cbox</div>
    </div>
</section>

 

위의 안좋은 예시에서는 일일히 길게 Element를 달아주었지만, 최초의 Block만 유지하고 그 뒤의 Element를 각각 다르게 해주는 것이 더 좋게 보입니다.

 

Modifier

마지막으로 Modifier입니다.

Modifier는 일반적으로 상태를 달아주며 위치는 Block뒤 또는 Element가 있다면 Element 뒤 입니다.

css에서 상태라고 하는 것은 해당 기능의 색상, 설정값, 속성등이 상태로 분류될 수 있습니다.

 

  <section id="contact">
    <div class="contact__container">
      <div class="contact__email">
        <button class="contact__btn--focused btn--gold">Email</button>
      </div>
      <div class="contact__number">
        <button class="contact__btn btn--dark">NUMBER</button>
      </div>
    </div>
  </section>

contact 섹션에 종속되어 있는 버튼 두개 중 하나에는 focus가 되어 있다는 것을 클래스명으로 명시적으로 지정하기 위해 Modifier를 사용할 수 있고

 

버튼을 Block단위 요소로 두고 각각의 버튼을 색상만 조금씩 다르게 할 수 있는 클래스를 한 번에 만든 뒤,

위와 같은 방식처럼 클래스명만 추가해서 그때그때마다 css에서 만들어야 하는 수고를 덜 수 있습니다.

 

BEM방법론 적용 실사례

BEM방법론을 앞에서 계속 좋다곤 했지만, 어떤 기대 효과가 있을까요?

 

https://tech.lezhin.com/2018/08/20/challenge-css

레진 챌린지 CSS 개발 후기

 

레진코믹스의 기술블로그입니다.

작성자 naradesign 개발자님의 말을 따르면 레진에서 css개발할 때 css전처리기 Sass를 사용하며,

HTML, CSS, JavaScript 에서 DOM을 조작하기 위한 용도로 클래스 이름에 한정하여 일관성있게 사용

한다고 합니다.

 

저도 빨리 더 공부해서 css전처리기도 다뤄보면서 프로젝트를 하는 경험을 블로그에 담아보고 싶네요!