BEM방법론

🤷‍♀️  BEM방법론이란 ?

CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다

 

😎  BEM의 기본구조

Block Element Modifier ⇒ 이 세가지로 구성된 이름을 짓는것임!!
  
각각 __와 —으로 구분한다

  <div class="header__navigation--input"></div>

header은 Block
navigation은 Element
input은 Modifier

BEM은 기본적으로 ID를 사용하지 않으며 class만을 사용함
어떻게 보이는가가 아님⇒ 어떤 목적인가에 따라 이름을 짓는

 

😈 Block  

재사용 가능한 독립적 블록으로 가장 바깥쪽 상위요소
=> 어디에 종속되지 않아서 헤더에 쓰일 수도 있고, 푸터에 쓰일 수도 있고, 여기저기 붙였다 떼었다 할 수 있다 

• Block 이름은 색상이나 크기 등을 묘사하는 이름이 아니라 구조적으로 의미 있는 이름을 사용한다
• 블럭은 블럭을 감쌀 수 있다 .header>.logo</span> =>header라는 블럭 안에 logo라는 블럭이 들어간 형태임  

😈 Element

블록 내부에 종속되어 실제 기능을 담당하는 부분
=> 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭안에서 떼어다가 다른데에 쓸 수없다.

Block과 Element의 이름 사이는 __로 구분짓는다

 <header class="search">
   <div class="search__content">
    <input class="search__input"/>
     <button class="search__button">Search</button>
   </div>
</header>

엘리먼트 또한 중첩이 가능함
 .search은 블럭이고, .search__content,input, button은 엘리먼트임
=> 다 똑같이 `.block`의 엘리먼트로 취급한다! 
⇒ 그래서 클래스네임에 캐스케이딩을 여러번 표시할 필요가 없음.
  
❓ BEM 방식을 쓰지 않으면

<header class="search">
   <div class="search__content">
    <input class="search__content__input"/>
    <button class="search__content__button">Search</button>
   </div>
</header>

 

=> 클래스네임에 캐스케이딩을 여러번 표시해주어야 함

😈 Modifier

Block이나 Element의 속성을 담당

• Modifier는 --로 구분짓는다
• boolean 타입과 key-value 타입으로 사용할 수 있다

🌠 불리언(boolean) 타입

<div class="tab__item--hidden"></div>
<div class="tab__item--visible"></div>

 

--hidden과--visible같은 불리언타입으로 쓸수 있다 

🌠 키-밸류(key-value) 타입

<form class="form-login form-login--theme-normal">
<strong class="title title--color-pink">

 

color-pink와 theme-normal가 key-value(속성-내용) 타입이다

정리

😎 BEM의 장단점 😎  

장점 

• 직관적인 클래스 명으로 마크업 구조를 직접 보지 않아도 구조의 파악이 쉬움
•  SASS작성 시, 늘어지는 셀렉팅을 막아줌
      (=>BEM방식을 쓰면 너도나도 엘리먼트라서 굳이 깊게 nested할 필요가 없어짐!! 하위 엘리먼트로 보지 않고 둘 다 똑같이 `.block`의 엘리먼트로 취급하기 때문...!) 

단점

• 이름이 길고 복잡해 질수 있다.