BEM에 대하여

해당 게시글은 2022.02.10에 깃허브로 작성되었습니다.

 

 개인 작업이든 협업이든 페이지의 구조가 복잡하거나 양이 많을수록 class명을 짓는 과정에서 애를 먹게 된다.

이런 때에 필요한 게 바로 BEM이며 BEM은 sass 사용 시에도 아주 유용하니 알아두는 편이 좋다.

 

---

 

1. BEM 방식이란?

• class명으로 명시 -> 기본적으로 ID 사용X / class만을 사용.
• '어떤 목적인가'에 따라 작명.
• 이름을 연결할(단어의 조합) 때에는 하이픈(-) 하나만 사용.
  ex) search-form

 

2. Block__Element--Modifier

(1) Block - 재사용 가능한, 기능적으로 독립적인 페이지 컴포넌트

ex) Logo는 header, footer 등 다양한 곳에서 사용 가능하다.

Block은 항상 맨 앞에 위치하도록 한다.

  <div class="header">

 

(2) Element - Block을 구성하는 단위(조각)

Block과 달리 의존적인 형태로, 자신이 속한 Block 내에서만 의미를 가진다.

'~의' 로 생각하면 파악이 용이하다.

ex) tabzilla__link = tabzilla의 link.

 

      <div class="header__search">
        <div class="search">
          <form>
            <div class="search__inner">
              <div class="search__title">
              </div>
            </div>
          </form>
        </div>
      </div>

+ 위 코드에서 search는 header에서도 footer에서도 사용될 수 있는 기능을 가진 독립적인 형태이기에 Block 단위로 표현한다.

+ 그러나 search__inner, search__title의 경우에는 search에 의존해서 존재하는 영역이고 독립적이지 않기에 언더바(__)로 search에 귀속돼있음을 명시한다.

 

(3) Modifier - Block이나 Element의 속성 담당

[Element의 속성을 명시하는 두가지 방식]

 1. boolean 타입(그 값이 true라고 가정하고 사용)

  <li class="tab__item tab__item--focused">탭 01</li>

tab__item의 속성(상태)이 focused라는 걸 명시해준다.

 

 2. key-value 타입(성질-내용)

  <strong class="title title--color-gray">VIP 로그인 (준비중)</strong>

color 속성이 gray로 설정되었다는 걸 명시해준다.

 

---

 

https://rlacodud.github.io/UID/Research/BEM/index.html

BEM 예제

위 예제 사이트에서 f12로 개발자도구를 켜고 요소와 class name을 확인하면 이해에 도움이 됩니다.

 

---

 

[참고 사이트]

CSS 방법론

[CSS 방법론] BEM 방식

BEM 사용 대표 사이트

Free How-To Tutorials & Online Courses by Envato Tuts+