BEM

BEM

 BEM이란 class 이름을 block, element, modifier로 나눠서 작성하는 것이다.

 

사용법

 block__element--modifier

 위에서 block은 전체적인 container가 된다고 할 수 있는 card이다. 그래서 단순하게 class 이름을 .card라고 해주면 된다.

 

 이 card 안에 들어가 있는 content들, 즉 image, description, button이 elements이다.

 

 이 때 button 사이에 success와 back이라는 2가지 버전(modifier)이 존재한다면 --로 덧붙여주면 된다. 만약 이 button이 해당 card에서 뿐만 아니라 다른 곳에서도 범용적으로 사용된다면 .card__button--success, .card__button--back이라고 하기 보다는 그저 .button--success, .button--back이라고 해주는 것이 재사용성 측면에서 효율적이다.

 

 

 

 이미지 출처 : https://blog.yanis.work/block-element-modifier-bem-css-methodology-df9db9771c6f