BEM (Block Element Modifier)

What is CSS BEM?

CSS BEM은 무엇입니까?

 

나의 답변

BEM(Block Element Modifier)은 CSS 아키텍쳐로 클래스명을 .block__element--modifier와 같은 형식으로 나타냅니다.

 

추가 학습내용

• CSS-in-JS의 scope문제를 해결하기 위한 대체 해결책
• 다양한 CSS 구조를 개선시키기 위한 CSS 개발 방법론

 

예시

Block

• 문단 전체에 적용된 요소 혹은 요소를 담고 있는 컨테이너를 말합니다.

• Block의 이름은 그 블록의 목적으로 기술되어야 하며, 그 Block의 상태를 나타내지 않습니다.
• Block은 자신의 환경에 영향을 끼쳐서는 안됩니다. (Block의 positioning이나 margin 값과 같은 외부 기하학적 요소를 설정해서는 안됩니다.) → Block의 재사용성이나 Block이 움직일 경우의 독립성을 보장

xxxxxxxxxx
<!-- 예시 -->
<!-- 옳은 예, 에러 블록이 의미상 적절 합니다. -->
<div class="error"></div>
​
<!-- 틀린 예, 블록은 어떻게 표현되어지는 지를 나타내지 않습니다. -->
<div class="blue-text"></div>

Element

• 블럭이 포함하고 있는 부분입니다. (Memenbership: 블럭에서 분리되어서는 안됨)
• Element의 이름은 그 Element목적으로 기술되어야하며, 그 Element의 상태를 나타내지 않습니다.
• Block내의 Element는 선택사항입니다. Optionality
• __ 더블 언더스코어를 사용하여 블록 이름으로부터 분리시킵니다.

xxxxxxxxxx
<!-- 예시 -->
<!-- `search-form` block -->
<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">
​
    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>

• 블록 구조가 변화하더라도 Element들의 규칙과 이름은 유지되어야 합니다.

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>
​
    <div class="block__elem3"></div>
</div>

Modifier

• Block혹은 Element의 속성입니다. Modifier은 Block혹은 Element의 외관이나 상태를 정의하는 Entity 입니다.

• Modifier의 이름은 자신의 외관 혹은 상태, 행동을 기술해야 합니다.
• --더블 하이픈를 사용하여 Block이나 Element이름으로 부터 분리합니다.

<nav class="navbar">
  <a href="/" class="navbar__link navbar__link--active"></a>
  <a href="/" class="navbar__link"></a>
  <a href="/" class="navbar__link"></a>
</nav>

• -을 사용하여 Modifier의 특성을 나타내기도 합니다.

<div class="block block--size-big"></div>

• is-*을 옵션으로 사용하기도 합니다.

<a href="/" class="navbar__link is-active"></a>

 

참고

https://velog.io/@yesdoing/BEM-Block-Element-Modifier-Quick-start

https://webclub.tistory.com/263