These are chat archives for bem/talk

21st
Jun 2015
Christian Petersen
@fnky
Jun 21 2015 18:35

I'm unsure of how to tackle this; I have a component outline-view which has grouping like so

<div class="outline-view">
  <div class="outline-view__group">
    <div class="group__item--header">A</div>
    <div class="group__item">Aruba</div>
    <div class="group__item">Afghanistan</div>
    <div class="group__item">Algeria</div>
  </div>
  <div class="outline-view__group">
    <div class="group__item--header">B</div>
    <div class="group__item">Bahamas</div>
    <div class="group__item">Bahrain</div>
    <div class="group__item">Bangladesh</div>
    <div class="group__item">Barbados</div>
  </div>
</div>
.outline-view { /* ... */ }
.outline-view__group { /* ... */ }
.group__item { /* ... */ }
.group__item--header { /* ... */ }

Let's say I introduce another similar component, that uses the naming of __group as well for a list, what would be the "correct" way to style these independently? My current solution is being specific:

.outline-view__group > .group__item { /* ... */ }
.outline-view__group > .group__item--header { /* ... */ }

.another-view__group > .group__item { /* ... */ }
.another-view__group > .group__item--header { /* ... */ }
Aleksei Gurianov
@Guria
Jun 21 2015 20:57

group__item is element of block group. But seems you treat them as elements of outline-view__group. BEM hasn't elements of elements. Just change naming of group__item to outline-view__group-item.

PS. There is forum on bem.info site made for such sort of questions. You can move your question there to get answers from more broad community and BEM-team.