I've had more success with using "modifier" classes on the element itself. Others front-end experts like [Nicolas Gallagher] (http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) suggest the same.

For example, your CSS might look like this:

    .bb-header { ... }
    .bb-header-dark { ... }

And the corresponding HTML:

    <header class="bb-header bb-header-dark">...</header>

Other variations include compound classes or using shared styles in CSS so you don't have to have 2 classes.

The reason this is preferable:

* No "action at a distance". The element owns it's dependencies. Less cascade magic means fewer bad surprises.
* Removes the chance of parent modifier style collision. Because the parent modifier (.skin-dark) can exist anywhere in the elements ancestry, it's easy to accidentally have more than one parent modifier class in the ancestry, causing all kinds of hilarious cascade problems.