경계 요소 - 블록 요소 - 수정자

BEM은 대규모 프로젝트를 위해 CSS를 작성하는 모듈식 솔루션입니다.BEM은 클래스를 어떻게 명명하는지에 대한 개념의 결합일 뿐이기 때문에, 우리는 대형 코드 라이브러리에서 그것을 사용하는 진정한 장점만을 볼 수 있을 뿐이다.
목표는 확장 가능하고 다시 사용할 수 있는 인터페이스 구성 요소를 만드는 것입니다.이런 방법은 대형 코드 라이브러리 조직을 유지하고 특정한 구역에서 하나의 CSS를 바꾸어 다른 CSS의 악몽을 파괴하는 것을 피하는 데 도움이 된다.
각 문자의 개념을 탐색하려면 다음과 같이 하십시오.
블록: 자체 의미 있는 솔리드(예:

.card

원소: 블록의 일부분으로 독립된 의미가 없고 의미상 블록과 연결된다.

.card__picture
.card__title
.card__descriptiom
.card__button

수정자: 블록 또는 요소의 플래그입니다.겉모습이나 행동을 바꾸는 데 쓰인다.

.card__button--active

주요 내용에 대한 요약:

https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

https://en.bem.info/