iamTony iamTony - 1 month ago 6
Sass (Sass) Question

BEM element nest naming and sass rule

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;
}
}
}

Answer

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>
Comments