번역: BEM을 중첩하시겠습니까?

원본 링크: http://csswizardry.com/2016/11/nesting-your-bem/

이 글을 시작하기 전에 이 글은 제안이나 새로운 "실천 가이드"가 아니라는 점을 말씀드리고 싶습니다. 이것은 단지 내 자신의 환상 중 일부일 뿐입니다.

저는 [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)의 지지자이자 후원자입니다. 그리고 그것은 수년 동안 지속되었습니다. 기대가 되는 일이 좀 재미있네요. 물론, 그것은 나에게 많은 것을 제공합니다:

* **소프트 캡슐화** 이는 이름 충돌을 줄이는 데 도움이 됩니다.
* **사용자 정의 CSS** 이는 DOM 노드가 서로 어떻게 연관되어 있는지 이해하는 데 도움이 됩니다.
* **대상 선택** 이는 하위 트리 간의 충돌을 줄이고 너무 많은 노드를 캡처하는 것을 방지하는 데 도움이 됩니다.
* **관리 스타일의 특수성** 이것이 큰 하이라이트입니다.
* **엄격한 구현 규칙** 이는 주어진 컨텍스트 외부에서 클래스를 사용하는 것을 방지합니다.

마지막 주장은 절반만 사실이라는 점만 빼면...

BEM은 `.widget__title`과 같은 클래스가 `.widget` 내에서만 사용될 수 있다고 알려줍니다. 그러나 이는 단지 계약의 조항일 뿐이다. 개발자는 `.model` 안에 `.widget_title`을 넣어도 계속 작동할 수 있습니다. 그 이유는 다음과 같습니다.

* 이전에 BEM을 본 적이 없거나 구현 방법을 모릅니다.
* 그들은 게으르고 알아내면 안 되지만 `.modal` 내에서 .widget_title을 재사용할 수 있습니다. `스타일을 하고 나면 5분 일찍 작업을 완료할 수 있습니다

그들은 그렇게 할 수 있고 효과가 있습니다. 모든 것이 여전히 올바르게 표시됩니다. BEM은 단지 규정일 뿐이고 규정에는 만장일치의 동의가 필요하므로 이로 인해 추가 오류가 발생하지 않습니다.

이를 우회하려면 다음과 같이 CSS를 작성할 수 있습니다.

```
.widget { }

.widget .widget__title { }
```

이제 개발자는 `.modal` 내에서 `.widget_title`을 사용할 수 없습니다. CSS에 `wideget_title`을 `.widget` 안에 넣어야 작동한다고 알려주었기 때문입니다. 이제 우리는 이러한 사항을 시행하기 시작하여 남용을 방지할 것입니다.

여기에는 또 다른 문제가 있습니다: 중첩

## CSS에 중첩

오랫동안 저는 CSS에 중첩하는 것이 좋지 않다고 [적극적으로 주장](http://cssguidelin.es/#specity)해 왔습니다. 그 이유는 다음과 같습니다.

* 기능을 추가합니다(항상 관리해야 함).
* 저장 위치에 대한 종속성을 도입합니다(유연하지 않은 시스템의 표시).
* 이동성이 떨어집니다(즉, 마음대로 이동할 수 없음). ;
* 취약성 증가(중첩은 잘못된 선택자가 발생할 가능성이 높다는 것을 의미합니다).

요약하자면, [CSS 선택기를 짧게 유지하세요](http://csswizardry.com/2012/05/keep-your-css-selectors-short/).

그러나 중첩된 BEM을 사용하는 경우 중첩이 실질적인 이점을 제공한다는 것을 알 수 있습니다. 하지만 이러한 결함을 어떻게 처리해야 할까요?

## 특이성

일반적으로 항상 낮은 특이성을 유지하는 것이 중요합니다. 그것은 절대적으로 사실이며 훌륭한 조언입니다. 그러나 여기에는 우리가 알고 있는 것과 약간의 차이가 있습니다. 사람들이 모든 경우에 특이성을 처리해야 한다고 말할 때, 실제로 의미하는 바는 일관성을 유지해야 하며 선택자 간에 차이가 거의 없어야 한다는 것입니다.

이론적으로(하지만 시도하지 마세요) 항목의 유일한 선택자는 ID 선택자입니다. 이는 특이성을 잘 관리합니다. 특이성은 일반적으로 높지만 적어도 모두 일관되고 동일합니다.

일관성 문제를 처리하는 방법에 대해 이야기할 때 [특이성 맵](http://csswizardry.com/2014/10/the-Specificity-graph)을 참조합니다. /) 최대한 평평하게.

다음 CSS 구성요소 시리즈를 살펴보면:

```

.nav-primary { }

.nav-primary__item { }

.nav-primary__link { }

.마스트헤드 { }

.masthead__media { }

.masthead__text { }

.masthead__title { }

.하위 콘텐츠 { }

.sub-content__title { }

.sub-content__title--추천 { }

.sub-content__img { }

```

…우리는 각 클래스가 정확히 동일한 특이성을 가지고 있음을 발견했습니다. 이것은 멋진 평면 특이성 플롯입니다:

<그림>