Skip to content

In BEM can I avoid reusing the same namespace inside a Block?  #143

@pishonx

Description

@pishonx

Hi team,
I am new using the BEM methodology.- and I have a question that hopefully you can help me out with Thanks!

Based on the following case:
image

What is wrong or against BEM methodology writing the example in SASS like this:

DOM

<div class='block'>
    <div class='__elem1'>
        <div class='__elem2'></div>
    </div>
    <div class='__elem3'></div>
</div>

SASS

.block {
   .__elem1 { }
   .__elem2 { }
   .__elem3 { }
}

I personally would avoid reusing the block namespace, since an element is already tight to is block.
Similarly to modifiers, I would write something like this:

SASS

.block {
   &.--xmas { }
   &.--summer { }
   &.--dark{ }
}

DOM

<div class='block --xmas'>
    <div class='__elem1'>
        <div class='__elem2'></div>
    </div>
    <div class='__elem3'></div>
</div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions