BEM (Block Element Modifier)

카드가 있다 가정하면 block는 카드 전체를 의미한다. 안에 들어 있는 img, title, button은 모두 element를 나타낸다.

block__element--modifier

위 카드에서 element들을 BEM 구조에 맞게 작성하면 이와 같이 작성 할 수 있다.

	.card__img
    .card__title
    .card__descripttion
    .card__button
    
    

다만, 이와같이 원본과 다르게 수정된 부분이 있으면 modifier이기 때문에 또 다르게 작성 해야한다.

	.card--blue
    .card__img
    .card__title
    .card__description
    .card__button--blue

이와 같이 카드가 여러개라면 어떻게 해야할까? 이럴 때는 하나씩 다 묶는 것이 아닌 전체를 cards로 묶고 위와 마찬가지로 코드를 작성하면 된다.

	.cards
    .card__img
    .card__title
    .card__description
    .card__button