What about the ancestors (or ascendants) of a component? How would it be?

[giovannipds]

Hello man!

First of all, great compilation, congratulations for your efforts. I also really like styleguides, rules, like yours.

I was thinking of a case today which it may be interesting of debating it with you. What about a case where my component is like, a ribbon. You know, in the corner of an element. I was thinking in some markup like this:

<div class="ribbon-container">
    <div class="ribbon">New</div>
    <h1>Etc...</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

In this case, the ribbon-container is an ancestor/ascendant of the component, and not a descendant. How would you suggest it to be marked up? ribbon-container? ribbon__container? I never read too much about BEM and this kind of suggestions so if you know something about it, it would be interesting listening to you.

Happy to contribute somehow. My best wishes. Regards, Gio. Oh, by the way, I'm also a brazilian, so if you'd prefer to discuss it in portuguese, feel free to do that.

[grvcoelho]

Hi 😄 How I would do it:

1. Calling .ribbon__container is not ideal because the container is not a descendant of .ribbon. I would call it .ribbon-container as well.

2. Keep .ribbon-container in the same file as the rest of the .ribbon definition. Something like ribbons.sass, for example.

[giovannipds]

Hello. That's exactly what I did. 😄

What you think of including this case to your repo?