grvcoelho / css-styleguide

:book: Opinionated CSS styleguide for scalable applications

css-styleguide's Issues

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

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.

Add Tools section

Quotes

Quotes

Quotes are optional in CSS. You should use single quotes as it is visually clearer that the string is not a selector or a style property.

/* wrong /
.avatar {
background-image: url('/img/you.jpg');
font-family: 'Helvetica Neue Light', Helvetica Neue, Helvetica, Arial;
}
/ right */
.avatar {
background-image: url(/img/you.jpg);
font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;
}

The "right" answer and "wrong" answer are switched based off of "You should use single quotes..."