Hi there,

I know one of the benefits of BEM is not having to nest styles but I was wondering when is it ok to do so? Sometimes it's unavoidable and sometimes maybe more practical to do so?

In the example I'm working on I have bands/stripes than contain blocks of content, these bands can be different colours (black, white, blue). I achieve this by having a base class of <div class="band">, which the band is black the following class is added: <div class="band band--black">. For obvious readability issues the content of a darker block will need to be coloured differently, the headings white, paragraphs/lists a lighter grey and maybe even a subtle lightening of the anchor colour. It'd be a pain to apply classes to everything, especially if different content mark-up appears on different pages. So is it acceptable to write the CSS like this (using SCSS):

.band--black {
    h1,
    h2,
    h3,
    h4 {
        color: rgb(255,255,255);
    }

    p,
    ul,
    ol {
        color: color: rgb(200,200,200);
    }
}

or even this, which might be able to keep track of, keeping the colour changes grouped together:

h1,
h2,
h3,
h4 {
    .band--dark & {
        color: rgb(255,255,255);
    }
}

p,
ul,
ol {
    .band--dark & {
        color: rgb(200,200,200);
    }
}

This is some (basic) sample HTML:

<div class="band band--dark masthead">
        <div class="wrap">

        <h1 class="masthead__title">Page heading</h1>
        <ul class="breadcrumbs">
            <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" title="TITLE">Home</a></li>
            <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" title="TITLE">Section Name</a></li>
        </ul>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat accumsan purus, in posuere nibh aliquam faucibus. Nam varius lectus id nunc ullamcorper, at euismod enim placerat.</p>

        <h3>Related Categories</h3>
        <ul>
            <li><a href="#" title="TITLE TEXT">Category 1</a></li>
            <li><a href="#" title="TITLE TEXT">Category 2</a></li>
            <li><a href="#" title="TITLE TEXT">Category 3</a></li>
            <li><a href="#" title="TITLE TEXT">Category 4</a></li>
        </ul>

    </div>
</div>

Another question I have is the class of masthead, part of me thinks this should really be band--masthead following the BEM spec?

Thanks in advance, just starting off with BEM so I keep find myself questioning most of my implementations of it!