BEM element nest naming and sass rule

Question

This is my current html structure, I've checked on other sources and some have different opinions and wanted to ask specifically for my situation.

Is the naming correct? Having domainname as the main block then on the domainname__pricelist I would create pricelist class so the child under than element would be pricelist__headers only and not domainname__pricelist__headers

    <div class="domainname container">
    Main
    <div class="domainname__pricelist pricelist">
            <div class="col-md-3">
                <div class="pricelist__headers">
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
            <div class="col-md-3">
                <div class="pricelist__headers">
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
            <div class="col-md-3">
                <div class="pricelist__headers"> 
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
            <div class="col-md-3">
                <div class="pricelist__headers">
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
        </div>
    </div>

However with this currect set-up I'm having issues with my sass rules in targeting pricelist__headers as it will target domainname__pricelist__headers can anyone recommend me a solution or comments, if I should just go with domainname__pricelist__headers or pricelist__headers or Is there any sass rule that will remove the main domainname and leave me with pricelist__headers

    .domainname{
    &__pricelist{
        &__headers{
            background: red;    
        }
    }
}

Does `pricelist__headers` need to be nested inside of `domainname` in the scss? — thgaskell, Oct 24 '16 at 02:10
@thgaskell not necessarily, I'm only doing that so that all code under a certain page or module would be grouped up. — , Oct 24 '16 at 02:13

score 3 · Accepted Answer · answered Oct 24 '16 at 02:12

Perhaps it's kind of confusing, however , if you just think that all the element under one block should be a child of the parent block name, that makes more sense and easier to write rules. In your case

    <div class="domainname container">
        <div class="domainname__pricelist pricelist">
           <div class="domainname__priceheader">
           </div>
        </div>
   </div>

and

  .domainname{
    &__pricelist{

    }
    &__priceheader{
            background: red;    
        }
}

choosing a proper name should be taken into account to make more sense.

according to this BEM's FAQ

What should I do if my block has a complex structure and its elements are nested? CSS classes like block__elem1__elem2__elem3 look scary.

According to BEM method, block structure should be flattened; 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>

+1 for clear explanation. I've been playing with BEM for some time now also and I find it very verbose sometimes. Do you happen to know what other css naming/structuring conventions are also popular/stable/stood-the-test-of-time? — Minjun Yu, Oct 24 '16 at 02:49
Well, there are some other things that you can follow like SMACCS or OOCSS or POSTCSS but all in all, you need to just read about them try them and find the best of them for just you because it may happen that in one project SMACCS + BEM would be great to use and in another project combination of them. I recommend you to read about SMACCS and naming convention that its author suggested. However, keep in mind, it's all depends on your project and your team. — Majid, Oct 24 '16 at 03:13

score 0 · Answer 2 · answered Oct 24 '16 at 08:55

As an essence to Majid's comprehensive answer, in the case of BEM I'd also get rid of &_ nestings. It becomes too complicated when you revisit your stylesheet and see these 3-levels deep nestings. For instance, I create element / modifier mixins and use them in styles like so:

@mixin e($element) {
  &__#{$element} {
    @content;
  }
}
.domainname {
  //...
  @include e(pricelist) {
    text-color: white;
  }
  @include e(priceheader) {
    background: red;
  }
}

As you can see it's much easier to read and understand that we are talking about elements.

BEM element nest naming and sass rule

2 Answers2