BEM / Block, Element, Modifier

block , element , modifier 각 요소로 클래스 명을 짓는 방식,

어떤 목적인가에 따라 이름을 지어 코드를 읽기 쉬워 협업 시에도 용이하다.

또한 부모와 자식관계를 명시하기 좋음 

 

block요소는 독립된 컴포넌트로 사용할 수 있는 단위를 말하고 

element요소는 block내에 위치하여 독립적으로 사용 할 수 없다.

<header class="header">                        //block요소: header, 컴포넌트로 독립적으로사용가능                        <h1 class="header__title">Chats</h1>   //엘리먼트요소: header__title, header__icons     <div class="header__icons"></div> </header>

 

block 의 element는 상하의 관계가 아니라 모두 같은 element로 본다.

<header class="header"> 

  <div class="header__content">                       

    <h1 class="header__title">Chats</h1>   //header__content-title이 아님

    <div class="header__icons"></div>

  </div>

</header>

 

modifier은 element의 속성으로 --로 표현한다.

class="screen-header__input--focus

class="screen-header__button--big

class="screen-header__button--gray