BEM 방법론

BEM이란?

• 공식 문서에 따르면 "웹 개발을 위한 컴포넌트 기반 접근법"이라고 나와있습니다.
• 조금 쉽게 풀어서 설명하자면, 웹 개발을 위해 지키면 좋을 작명 규칙들입니다.
• BEM은 Block, Element, Modifier의 약자이며 각각 CSS 이름을 어떻게 짓는게 효과적인지를 정한 규칙입니다. 

 

BEM 구조 

• 빠르게 훑어보자면 Block, Element, Modifier의 이름을 아래와 같이 지으면 좋습니다. 

.block{ }

.block__element{ }

.block--modifier{ }

.block__element--modifier{ }

 

왜 BEM을 사용해야 할까?

• 아래와 같이 개발 시 발생 할 수 있는 문제들을 BEM을 통해 해결할 수 있습니다. 

1. 클래스 이름 충돌 > name space로 완전히 분리
2. 스타일 덮어쓰기 > 독립적인 블록으로 처리
3. 코드 이해 어려움 > 명확한 관계 표현
4. 재사용 불가능 > 컴포넌트 단위 설계 

 

Block 작명 규칙 

1. 좋은 예시(정확한 의미가 전달되도록 사용)
   
   • .header{ }
   • .menu{ }
   • .search-form{ }
   • .user-profile{ }
2. 안 좋은 예시 (의미가 모호한 이름)
   • .content{ }
   • .big-block { }
   • .block1 { }

 

Element 작명 규칙 

1. Block과 Element는 __(더블 언더바)로 연결한다.
   • .card__image
   • .card__button
   • .menu__item
   • .menu__link
   • .search-form__button
   • .search-form__input
2. 주의사항: Element의 Element 일 경우
   • .card__header__title > X (이런 식으로 적지 말 것) 
   • .card__header{}
   • .card__title{}  > O (이렇게 나눠서 사용)

 

Modifier 작명 규칙 

1. Block의 modifier일 경우
   • .card--featured{}
   • .button--large{}
   • .menu--vertical
2. Block Element의 modifier일 경우
   • .card__button--disabled{}
   • .form__input--error{}
   • .menu__item--active{}