= CSS명 정하는 방법

장점

• class이름으로 목적 또는 기능을 전달한다.
• class이름으로 구성 요소의 구조를 전달한다.
• 선택자 명시도를 항상 낮은 수준으로 유지한다.

/* BEM 사용 */
.photo { } /* 명시도 10 */
.photo__img { } /* 명시도 10 */
.photo__caption { } /* 명시도 10 */

/* 사용x */
.photo { } /* 명시도 10 */
.photo img { } /* 명시도 11 */
.photo figcaption { } /* 명시도 11 */

작성 하는 방법

.block__element--modifier
/* block - 독립적으로 존재가능하며, 재사용이 가능한 컴포넌트의 최상위 요소 */
/* element - 블럭의 자식요소. 부모블럭 안에서만 사용됨 */
/* modifier - 부모블럭 또는 자식요소의 외관(디자인), 상태나 행동(active, hover)을 변경 */

상세 예시

예시 참고 - https://naradesign.github.io/bem-by-example.html

<!-- block 하나만 있을경우/ 자식요소, 수정자 없음 -->
<button class=”btn”></button>

<style>
  .btn {}
</style>

<!-- block 하나인데 수정자 있음 -->
<!-- !!주의!! class="btn--secondary" 변경자 클래스만 사용하면 안됨 -->
<button class="btn btn--submit"></button> 

<style>
  .btn {
    display: inline-block;
    color: blue;
  }
  .btn--submit {
    color: green;
  }
</style>

<!-- block에 자식요소 있음 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>
<style>
  .photo { } 
  .photo__img { } 
  .photo__caption { }
</style>

<!-- block에 자식요소 안에 또 자식요소가 있고 또 있고 ... 이럴땐 ? -->
<!-- 그냥 똑같이 block__element 유지하면 됨! -->
<!-- BEM은 구조의 깊이를 전달하지 않기 때문 -->
<!-- !!주의!! photo__caption__quote 이런식으로 사용하면 안됨 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__quote">
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<!-- block의 변경자 기반으로 각 자식요소 스타일을 동일하게 변경하고 싶을때 -->
<!-- 이렇게 하면 명시도가 높아지지만 구성 요소 수정이 훨씬 수월해짐. -->
<!-- BEM이 선택자 중첩을 금지하는 건 아님. 다만 지금보다 중첩이 더 깊어지면 곤란함. -->
<figure class="photo photo--highlighted">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style>
  .photo--highlighted .photo__img { }
  .photo--highlighted .photo__caption { }
</style>
<!-- !!주의!! 이렇게 하지 마세요 -->
<style>
  .photo__img--highlighted { }
  .photo__caption--highlighted { }
</style>

<!-- CSS명이 여러 단어일때 -->
<!-- 케밥 케이스를 접목한 명명법 -->
<div class="some-thesis some-thesis--fast-read">
  <div class="some-thesis__some-element"></div>
</div>

<style>
  .some-thesis { }
  .some-thesis--fast-read { }
  .some-thesis__some-element { }
</style>

<!-- 이렇게 카멜 케이스를 접목해도 됨 -->
<div class="someThesis someThesis--fastRead">
  <div class="someThesis__someElement"></div>
</div>

<style>
  .someThesis { }
  .someThesis--fastRead { }
  .someThesis__someElement { }
</style>