BEM(Block, Element, Modifier) ​​— CSS 방법론

BEM(Block, Element, Modifier) ​​— CSS 방법론

The **Block, Element, Modifier *(BEM) methodology is a popular naming convention *for classes in HTML and CSS.
Developed by the team at Yandex

HTML 문서는 블록이라는 여러 영역으로 나뉩니다. 블록에는 요소라는 추가 영역이 포함될 수 있습니다. 수정자는 요소 간의 사소한 차이를 명확하게 만드는 데 사용됩니다. 이러한 모든 요소는 하나 이상의 클래스에 할당됩니다.

차단하다

블록은 웹 사이트의 개체를 나타내며 재사용이 가능합니다. 그것들을 코드의 더 큰 구조적 조각으로 생각하십시오. 일반적으로 모든 웹 사이트에서 가장 일반적인 블록은 머리글, 콘텐츠, 사이드바, 바닥글 및 검색입니다.

HTML

<div class="block">
...
</div>

CSS

.block{

}

요소

요소는 종속된 블록에 속하는 개체입니다. 웹 페이지의 특정 개체가 요소가 되는지 블록이 되는지 여부는 컨텍스트에 따라 다릅니다. 오브젝트가 주변 블록과 독립적으로 사용되려면 요소가 아니라 블록이어야 합니다. 반대로 객체가 재사용되지 않고 블록의 컨텍스트에서만 사용할 수 있는 경우 요소로 생성됩니다.

HTML

<div class="block">
...
   <span class="block__element"></span>
</div>

CSS

.block__element{

}

BEM을 제대로 사용하려면 웹 사이트 내에서 이러한 요소를 재사용할 수 있기를 원하기 때문에 중첩된 개체로 작업하는 것을 권장하지 않습니다.

나쁜

.block .block__element{

}
div.block__element{

}

수식어

수정자는 요소 간의 사소한 차이를 명확하게 만드는 데 사용됩니다.

HTML

<div class="block">
...
</div>

CSS

.block--modifier{

}

.block__element--modifier{

}

상위 블록의 수정자를 기반으로 블록의 요소를 수정하려면 다음과 같이 사용할 수 있습니다.

.block--modifier .block__element{

}

Sass와 BEM

Sass로 작성하고 싶은 분들은 여전히 ​​중첩된 형식으로 작성할 수 있으며 BEM을 올바르게 사용하기 위해 @at-root를 사용할 수 있습니다.

사스

.block {

  @at-root #{&}__element {

}

  @at-root #{&}--modifier {

}

}

출력 CSS

.block {

}

.block__element {

}

.block--modifier {

}

BEM의 문제

1. 래퍼
일부 컨테이너는 블록 외부에서 사용되는 스타일링을 위해 상위 래핑이 필요합니다. .block__wrapper와 같이 호출하고 .block 블록 자체 외부에 배치하는 것은 약간 잘못된 느낌입니다. .block-wrapper 또는 .block-container와 같은 이름 지정 규칙을 채택하여 블록과 관련이 있음을 명확히 할 수 있지만 BEM 세계에서는 두 개의 상호 의존적인 요소가 됩니다.

2. 클래스 모든 것
BEM은 구성 요소의 각 요소에 클래스를 추가해야 한다고 지시합니다. 그러나 단락 태그와 같이 응용 프로그램 전체에서 요소가 자주 사용되는 경우 규칙을 위반하는 경우가 있습니다.

요약

BEM은 네임스페이스, 상속 및 모듈성과 같은 개념을 CSS 세계에 도입했습니다. 그러나 BEM은 전처리기 또는 컴파일러에서 사용하는 기술이 아니므로 귀하와 귀하의 팀에서 적용해야 합니다. 그렇지 않으면 올바르게 수행하지 않으면 해결하려는 모든 문제를 해결한다는 확신을 잃게 됩니다.