CSS 클래스 이름 설정 : BEM(Block Element Modifier)

최종 수정 : 2024-04-18

BEM(Block Element Modifier)

BEM은 CSS 클래스 이름을 짓는 규칙이다. 블록(Block), 요소(Element), 변경자(Modifier) 형태로 작성한다. 블록은 <div> 같은 영역을 의미하고, 요소는 <button>, <input> 같은 요소를 의미한다. 마지막으로 변경자는 요소의 변형을 표시한다.

 

장점

CSS 클래스의 이름을 짓는 고민을 덜 수 있다.

 

단점 및 한계

여전히 규모가 큰 코드를 관리하기는 어렵다

<form class="signin-form">
  <label class="signin-form__label">
    Email
    <input type="text" class="signin-form__input">
  </label>
  <label class="signin-form__label">
    Password
    <input type="password" class="signin_form__input signin_form__input--pasword">
  </label>
  <button class="signin-form__button signin-form__button--submit">
    Sign In
  </button>
</form>

.signin-form { /* 로그인 폼 */ }

.signin-form__input { /* 로그인 폼의 인풋 */ }

.signin-form__input.signin-form__input--password { /* 로그인 폼의 비밀번호 인풋 */ }

.signin-form__button { /* 로그인 폼의 버튼 */ }

.signin-form__button.signin-form__button--submit { /* 로그인 폼의 제출 버튼 */ }

---

참고 자료

https://www.codeit.kr/topics/bc-modern-css/lessons/6026

 

https://naradesign.github.io/bem-by-example.html

예제로 이해하는 BEM.

https://css-tricks.com/bem-101/

BEM 101 | CSS-Tricks

https://en.bem.info/methodology/quick-start/

Quick start / Methodology / BEM

https://getbem.com/introduction/

BEM — Introduction