CSS의 BEM표기법

신입으로 들어가서 처음으로 받은 디자인 시안을 보고 일단 생퍼블리싱을 해보는게 처음 맡은 일이었는데 많은 css 표기법중 

가장 대표적인 BEM 표기법을 내가 제대로 모르고 있다는 사실에 충격을 먹고 다시 공부를 하기 시작했다. 

 

BEM 표기법이란? 

BEM은 Block Element Modifier의 약자이며

Component 기반의 웹 개발 접근법 중 하나 이다.

이 방법론은 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는 것이 목표이며.

이것은 복잡한 UI를 가진 페이지의 인터페이스 개발 환경을 쉽고 빠르게 하며, Copy and Paste 없이 존재하는 코드의 재활용을 가능하게 한다.

 

1. 기본구조

위에서도 말했듯이 BEM은 Block, Element, Modifier로 나눠서 표기한다 표기하는 방식은 __ , -- 로 나눠진다.

Block 

은 기능적으로 독립된 페이지의 Component는 재사용 될 수 있어야 한다.

HTML에서 블록들은 class 속성으로 표현된다.

Element

은 블록에서 분리되어 사용될 수 없는 한 블록을 이루는 부분 이다. 표기는 __로 나타내어 준다. 

특징은 한 element는 항상 한 블록의 부분이어야 하고, 이것은 element의 이름이 계층구조로 선언 될 수 없음을 의미한다.

Modifier

은 block이나 element의 속성을 담당한다.

생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 된다.

 

아직은 생소하고 어렵게 느껴질수있다 예시를 보며 공부를 해보자!

<div class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="nav__link">
        <span>Web Platfrom</span>
        <i class="fa fa-caret-down"></i>
      </a>
      <div class="nav__submenu nav__submenu--col2"></div>
      <div class="nav__submenu"></div>
      <div class="nav__submenu"></div>
    </li>
  </ul>
</div>

 

 

이 코드를 보게되면, nav 가 블록, nav__가 붙는것들은 nav의 element들이고, nav__submenu--col2에서 --col2는 submenu 의modifier 라는걸 알수있다.

 

처음에는 왜 이 표기법을 써야하나 이해되지 않았지만, 공부하다 보니 이방법은 뚜렷하게 어떤게 어디에 속해있고 어떤 속성인지 알수 있게 해주어서 좋았던것같다.

또한 이러한 방식으로 쓰다보면 SCSS를 쓰기에도 매우 편리 할것같다라는 생각이 파바박 들었다.

SCSS쓰는 방식도 부모 안에 요소들을 연결지어 쓰는 방식이기 때문이다.

 

아직은 갈길이 멀지만 여러가지로 많이 배우는 날들인것같다 화이팅!