BEM 네이밍

B

Block; 그 자체로 의미가 있는 독립적인 부분

header, container, menu, checkbox, input

 

 

E

Element; 독립적인 의미가 없고 해당 블럭과 연결된, 블록의 일부

block에 의존적인 형태로 block 안에서만 의미를 가짐

block 뒤에 '__'를 붙여 사용

header__title, menu__title, checkbox__caption

 

M

Modifier; 속성

해당 부분이 다르게 동작하거나 색상 등의 스타일이 다른 경우 사용

block이나 element 뒤에 '--'를 붙여 사용

 

- 불리언(boolean) 타입

active 상태로 속성을 주는 것

--> active 상태가 true라고 가정하고 사용

 

<div class="nav">
  <ul class="nav__list-wrap">
    <li class="nave__item nav__item--active">메뉴 1</li>
    <li class="nav__item">메뉴 2</li>
  </ul>
</div>

 

 

https://www.youtube.com/watch?v=er1JEDuPbZQ

 

 

// html 작성

<div class="card">
  <span></span>
  <div class="content">
    <ul>
      <li>Adobe XD</li>
      <li>Figma</li>
      <li>Sketch</li>
    </ul>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum officia autem quasi eum doloribus neque
      voluptatem possimus esse modi distinctio veniam debitis delectus totam, ex tempore sint, fugiat sed quam.</p>
    <a href="#">visit the link</a>
  </div>
</div>

 

//BEM 방식

<div class="card">
  <!-- block -->
  <span class="card__img"></span>
  <!-- element -->
  <div class="card__content">
    <ul class="card__list">
      <li class="card__item card__item--active">Adobe XD</li>
      <li class="card__item">Figma</li>
      <li class="card__item">Sketch</li>
    </ul>
    <p class="card__desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum officia autem quasi eum doloribus neque
      voluptatem possimus esse modi distinctio veniam debitis delectus totam, ex tempore sint, fugiat sed quam.</p>
    <p class="card__link" href="#">visit the link</p>
  </div>
</div>

 

 

참고 사이트

 

https://velog.io/@jiseong/CSS-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-BEM

[CSS] 네이밍 컨벤션 BEM