0

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?

user2734550
  • 952
  • 1
  • 12
  • 35
  • I think a downside to this approach would be that you would have to rely on nesting your CSS, which could create problems related to specificity. – Mario Pabon Sep 21 '15 at 19:14
  • If the _child class is more than 3-4 levels. I can still take it out and write it as a 2nd level class in CSS. ex: Component { _child{} ). I felt there might be some inconvenience but not necessary a problem. Can you give specific example to demo your concern? – user2734550 Sep 21 '15 at 19:23
  • This is probably a minor concern, but if you (or someone else) wanted to change the styles of _child, they would have to remember to prefix their selector with Component. A bigger concern would be that you wouldn't be able to use _child anywhere else except under Component, which would limit its ability to be reused anywhere else. – Mario Pabon Sep 21 '15 at 19:39
  • This approach could work if you stick to class selectors and compose your classes atomically. – Mario Pabon Sep 21 '15 at 19:42
  • Isn't the idea of component is to be more specific and not letting child class being used outside component? – user2734550 Sep 21 '15 at 20:16
  • Components are supposed to be building blocks of an application. Ideally, a component should work on its own, and not be dependent on other components. – Mario Pabon Sep 21 '15 at 20:53
  • which means the child class should never being used outside of it's component. I think this naming style works. Thanks – user2734550 Sep 21 '15 at 21:01
  • It will work fine. But it isn't BEM. It's more like how CSS is designed to be used. – Alohci Sep 21 '15 at 21:19

1 Answers1

1

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! */
}
Paleo
  • 21,831
  • 4
  • 65
  • 76