[CSS] BEM - CSS : Modifiers, Mixes

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다.

 

BEM - CSS : Modifiers, Mixes

 

---

 

Modifiers

BEM 모디파이어는 블록의 외양, 상태, 동작을 정의합니다. 블록 디자인은 모디파이어를 제거하거나 변경함으로써 변경됩니다.

<button class="button button_size_s">...</button>

.button {
    font-family: Arial, sans-serif;
    text-align: center;
}

.button_size_s {
    font-size: 13px;
    line-height: 24px;
}

.button_size_m {
    font-size: 15px;
    line-height: 28px;
}

모디파이어를 사용하여 필요한 CSS 속성을 재정의하여 블록 디자인을 변경할 수 있습니다.

Mixes

• 코드를 복제하지 않고 여러 엔티티의 동작과 스타일을 결합합니다
• 다른 HTML 엘리먼트에 동일한 형식을 제공합니다

외부 여백 및 배치

BEM에서 사용하는 CSS의 외부 여백이나 배치를 담당하는 스타일은 사우이 블록에 설정됩니다.

<!-- `header` block -->
<header class="header">
      <button class="button header__button">...</button>
</header>

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Frame */
}
.header__button {
    margin: 30px;               /* Padding */
    position: relative;
}

이 예에서는 버튼 블록의 외부 여백 및 위치가 header__button 선택자를 통해 설정됩니다. button 블록에는 여백이 지정되어있지 않아 어디에서든 자유롭게 재사용할 수 있습니다.

블록 모음 스타일링

한 페이지에 있는 여러 HTML 요소에 동일한 형식을 동시에 적용해야 하는 경우가 있습니다. 이러한 경우 그룹 선택자를 사용합니다.

<article class="article">...</article>

<footer class="footer">
    <div class="copyright">...</div>
</footer>

.article, .footer div {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

위 예에서, article 과 copyright 블록 안에 있는 텍스트는 같은 색과 폰트 스타일을 갖습니다.

그룹 선택자를 사용하는건 페이지 디자인을 빠르게 변경할 수 있지만, 코드간 연관성을 강화하는 문제가 있습니다.

이 지점에서 BEM의 Mixes를 사용해 HTML 엘리먼트 전체를 균일하게 작성할 수 있습니다.

예제:

<article class="article text">...</article>

<footer class="footer">
    <div class="copyright text">...</div>
</footer>

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}