[아티클 프로젝트 026] [CSS 방법론] BEM 방식

 

[CSS 방법론] BEM 방식 

 

BEM (Block Element Modifier)

• Block
  • 독립적인 컴포넌트 단위
  • header, search 등이 될 수 있다.
• Element
  • 블럭을 구성하는 단위
  • search의 input 등이 될 수 있다.
• Modifier
  • 블럭, 엘리먼트의 속성
  • search의 focused나 button의 disabled 등이 될 수 있다.
• __와 --로 구분한다.
  • 이름연결시에는 하이픈(-)하나로 연결한다.
    • block-name
• Block Element Modifier
  • class만을 사용한다.
  • 어떤 목적인가를 중점으로 네이밍한다.

 

 

Block

• header, logo, search 등이 될 수 있다.
• header > logo 일 경우 분리될 수 있는 컴포넌트 단위인 경우 block으로 처리한다.

<div class="search">
    <label>
        <button>검색</button>
    </label>
    <input type="text" value="" />
</div>

 

 

Element

• search 블럭의 input이나 label, button등이 될 수 있다.
• search__input, search__label처럼 작성하며 label 엘리먼트 내부에 버튼 엘리먼트가 있다면 하위 엘리먼트로 작성하지 않고 search__label처럼 블럭의 엘리먼트로 똑같이 취급한다.
• block-name__element-name 형식을 따른다

<div class="search">
    <label class="search__label">
        <button class="search__button">검색</button>
    </label>
    <input class="search__input" type="text" value="" />
</div>

 

 

Modifier

• 생긴게 다르거나 동작이 다른 블럭이나 엘리먼트에 사용한다.
• search의 focused, button의 default 등으로 사용할 수 있다.
• 불리언 타입으로 작성할경우 search__input--focused로 표현할 수 있으며 키-밸류 타입으로 작성할 경우 search__input--color-gray 와 같이 작성할 수 있다. 
• --로 연결해 사용한다.

<div class="search">
    <label class="search__label">
        <button class="search__button">검색</button>
    </label>
    <input class="search__input" type="text" value="" />
    <input class="search__input search__input--hidden" type="text" value="" />
</div>

 

 

클래스 네이밍으로 구조를 파악할 수 있으며 이 글을 읽게된 계기가 SCSS에서 어떻게 하면 편할까를 생각하다가였다.

BEM에 대해 대략적으로 알고있었지만 도움이 많이 되는 글이었다.

글쓴이가 말하는 좋았던 점에서 부모참조자(&)와 찰떡궁합이라고하는데, 실제로 사용할 때 편리함을 느꼈다.

하지만 BEM에 익숙하지 않기때문에 Block, Element, Modifier를 파악해서 네이밍하는데에 꽤나 많은 시간을 소모하고있었도 그리고 네임이 길어지고....

플러스로 복사 붙여넣기 시에 셀렉트가 한번에 안되기 때문에 불편하기도 했다.

BEM 글을 읽고 공부하는데, 마크업 구조를 같이 공부하는 것 같기도하고 컴포넌트화 시키는 공부인 것 같기도해서 재미있는 방법론인것 같다.

 

---

 

[CSS 방법론] BEM 방식 

https://nykim.work/15