Search code examples
htmlcssclassclassnamebem

A better way to write BEM style in HTML

Lets says I am creating a component "Component" and its children or modifier. BEM style would be

<div class="Component Component--modifier">
 <div class="Component__child"></div>
</div>

I'd like write it as this way
<div class="Component Component--modifier">
 <div class="_child"></div>
</div>

In CSS, I would strictly write _child class inside Component scope so there isn't any globle _child class.

I wonder what potential risk or cons my style guide would cause?

Solution

  • You can't.

    An example:

    <div class="MyRoundedBlock MyRoundedBlock--blue">
    <div class="_title"></div>
    <div class="OtherBlock">
        <div class="_title"></div>
    </div> 
</div>

    CSS:

    .MyRoundedBlock ._title {
    /* This rule applies to your OtherBlock's title too! */
}