BEM CSS 방법론 (Block_Element–Modifier)

#bem #css #html

BEM (Block, Element, Modifier)은 웹 개발 쓰이는 CSS 방법론중 하나입니다.
Block__Element–Modifier의 형태를 가집니다.

블록 (Block)

  • 해당 블록의 목적을 정의 (menu, button)
  • 상태 정의는 불가 (red, big)
  • 재사용 할 수 있는 독립적인 구성 요소
  • 클래스 선택자 사용
  • 외부 여백(margin) 불가
  • 중첩 가능
  • 계층 가능

기본 블록

<div class="error"></div> // O
<div class="red-text"></div> // X

중첩과 계층 블록

<!-- 'header' block -->
<header class="header">
    <!-- 'logo' block -->
    <div class="logo"></div>        
    <!-- 'search-form' block -->
    <form class="search-form"></form>
</header>

<body class="page">
    <header class="header page__header"></header>
    <footer class="footer page__footer"></footer>
</body>

엘리먼트 (Element)

  • 재사용과 독립적인 사용 불가
  • 해당 블록의 목적을 정의 (menu, button)
  • 상태 정의는 불가 (red, big)
  • 중첩 가능
  • 계층 가능
  • __로 구분합니다.

기본 엘리먼트

<!-- O -->
<form class="search-form">
    <div class="search-form__content">      
        <input class="search-form__input">
        <button class="search-form__button">
            Search
        </button>
    </div>
</form>

<!-- O -->
<form class="search-form">
    <div class="search-form__content">      
        <input class="search-form__content-input">
        <button class="search-form__content-button">
            Search
        </button>
    </div>
</form>

<!-- X -->
<form class="search-form">
    <div class="search-form__content">      
        <input class="search-form__content__input">
        <button class="search-form__content__button">
            Search
        </button>
    </div>
</form>

중첩과 계층 엘리먼트

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

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

블록과 엘리먼트 차이

블록 요소에 직접 스타일을 주지 않고 엘리먼트 요소에 선언합니다.

<body class="page">
    <header class="header page__header"></header>
    <footer class="footer page__footer"></footer>
</body>

<style>
    .page__header {
        padding:20px;
    }
    .page__footer {
        padding:50px;
    }
</style>

옵션

엘리먼트가 블록이 될 수도 있습니다.
모든 블록 요소가 엘리먼트를 가지지 않아도 됩니다.

<div class="search-form">
    <input class="input">

    <button class="button">Search</button>
</div>

수식,상태 (Modifier)

  • 블록 또는 요소의 모양, 상태 또는 동작을 정의합니다.
  • 크기, 모양, 테마등을 표시합니다.
  • — 로 구분합니다.

기본 Modifier

<div class="block block--mod">
    <div class="block block--size-box block--shadow-yes"></div>
</div>

<div class="block--mod"><div>

예제

<form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text" />
    <input
        class="form__submit form__submit--disabled"
        type="submit" />    
</form>

<style>
    .form {}
    .form--theme-xmas {}
    .form--simple {}
    .form__input {}
    .form__submit {}
    .form__submit--disabled {}
</style>
참고

BEM