BEM 블록, 이름 지정 및 중첩

BEM 블록, 이름 지정 및 중첩

---

BEM 명명 규칙에 대해 머리를 감싸려고합니다. 나는 이것에 갇혀있다. 내가 뭔가를 오해 할 수도 있습니다.

사이드 바 탐색과 콘텐츠 탐색이 있습니다.

내 사이드 ​​바 탐색은 다음과 같습니다.

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

내 콘텐츠 탐색은 다음과 같습니다.

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

이제 .nav__item 스타일을 지정하면 문제가 발생합니다. 두 탐색 모두에서 발생하며 동일한 스타일이 없어야합니다. 여기서 일부 중첩을해야합니까, 아니면 블록과 요소의 이름을 잘못 지정 했습니까?

CSS의 중첩 예 :

.content__nav .nav__item { background: Red; }

또는 다음과 같이 이름을 지정해야합니다.

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>

도울 수 있니?

---

BEM 클래스를 작성하는 방법에는 여러 가지 변형이 있으므로 여러 경쟁 표준이 있음을 유의하십시오. 그것은 일련의 느슨한 지침으로 시작되었습니다. 이 답변을 게시 한 이후 Yandex는 공식 표준을 크게 개편했습니다 (상당히 개선되었습니다). 내가 사용하는 BEM 버전은 Nicolas Gallagher의 기사를 기반으로 합니다 .

이 시점에서 저는 "Atomic OOBEMITLESS"를 사용합니다. 이것은 클래스가 모듈 식이고 네임 스페이스이고, 선택자는 특이성이 낮고, 상태는 CSS 전 처리기 위에 CSS를 확장 할 수있는 클래스로 전환 될 수 있다는 것을 말하는 방법입니다. 코드를보다 간결하고 표현력있게 만들 수 있습니다.

즉, 다음 BEM 표준을 사용할 것입니다.

• 하이픈으로 연결된 클래스 이름을 블록으로 :
  foo-bar
• 블록 이름 다음에 __요소에 대한 하이픈으로 연결된 클래스 이름이 뒤 따릅니다.
  foo-bar__fizz-buzz
• 블록 또는 요소 이름은 다음 --수식에 대한 하이픈 클래스 이름 하였다 :
  foo-bar--baz, foo-bar--baz__fizz-buzz,foo-bar__fizz-buzz--qux

BEM 약식 : block-name__element-name--modifier-name

---

예제에는 세 가지 다른 블록이 있습니다.

1. sidebar, sidebar__nav요소가 있습니다.
2. content, content__nav요소가 있습니다.
3. nav, nav__item및 nav__link요소

sidebar및 content블록은 동일한 블록에 변형되도록 표시하고로 표현 될 수 .region.region--sidebar와 .region.region--content.

nav블록은에 암시 적 ul요소, 그리고 당신은 명시해야한다 :

<ul class="nav"><!-- could be content__nav or sidebar__nav as well if you choose -->
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>

ul요소가 nav블록 임을 지정했으면 nav블록을 수정 하는 것이 좋습니다 .

<ul class="nav nav--content">
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
</ul>

Once you've set up the CSS classes, styling all nav__item elements is simply:

.nav__item {
    ...styles here...
}

and overriding those styles for the content nav__item elements is:

.nav--content__item {
    ...styles here...
}

---

You should probably have a look at BEM's FAQ.

What would be a class name for an element inside another element? .block__elem1__elem2?

What should I do if my block has a complex structure and its elements are nested? CSS classes like block__elem1__elem2__elem3 look scaring. According to BEM method, block structure should be flatten; you do not need to reflect nested DOM structure of the block. So, the class names for this case would be:

.block{}
.block__elem1{}
.block__elem2{}
.block__elem3{}

Whereas the DOM representation of the block may be nested:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>

---

Consider idea of _key_value pairs for modifiers (block or element is separated from modifier name with one underscore and its value with another one).

That makes sense to distinguish modifiers one from another (e.g. nav_type_content and nav_type_sidebar are both about the place where nav apper on the page but modifiers setting theme, size or making links work via ajax are different) and so to understand which modifiers can't be used together on one DOM-node.

Also it's more convenient to work with key: value pairs in javascript.

And there are quite a lot of ready-made components and tools which uses such convention: https://github.com/bem/

참고URL : https://stackoverflow.com/questions/22566179/bem-block-naming-nesting