[FastCampus] CSS - BEM 이란?

CSS BEM 모델이란?

Block-Element-Modifier : CSS 클래스 네이밍. 가독성과 재사용성을 높여줌.

• Block : 최상위 요소. 독립적으로 존재. 다른 요소에 의존하지 않음. (ex: button, header)

• Element : 블록의 일부. 특정 기능을 수행하는 요소. 블록과 함께 사용함. (ex: button--modal, header--btn)

• Modifier : 수정자. 블록, 엘리먼트의 외관이나 상태 변경할 때 사용. (ex: block__list-item--highlighted)
  
  
  
  

장점

• 가독성 : 클래스명에 구조적인 정보를 담아 코드를 읽기 쉽게 함
• 재사용성 : 모듈화된 구조로 컴포넌트의 재사용 쉬움
• 유지보수성 : 클래스간의 의존성을 낮춤
  
  

단점

• 클래스명이 길어질 수 있음
• 요소 및 수정자 사용을 위해 추가적인 클래스 작성이 필요함

<div class="block">
  <h2 class="block__title">
    <ul class="block__list">
      <li class="block__list-item"></li>
      <li class="block__list-item block__list-item--highlighted"></li>
      <li class="block__list-item"></li>
    </ul>
  </h2>
</div>