Modular, conflict free, BEM-style CSS

Question

I want to standardise the CSS I use, and am leaning towards bem — I know I'll get a lot of benefit from the predictability of its pattern.

I have hacked their formula ever so slightly - I don't include the B part of the classname on child elements. For me this makes the html easier to write, and maintain.

Pure BEM

<ul class="Slideshow">
    <li class="Slideshow__slide Slideshow__slide--is-active">
        <img class="Slideshow__image" src="/blah" />
    </li>
    <li class="Slideshow__slide">
        <img class="Slideshow__image" src="/blah" />
    </li>
</ul>

.Slideshow {}
.Slideshow__slide {}
.Slideshow__image {}

My Modified BEM

<ul class="Slideshow">
    <li class="slide slide--is-active">
        <img class="image" src="/blah" />
    </li>
    <li class="slide">
        <img class="image" src="/blah" />
    </li>
</ul>

.Slideshow {}
.Slideshow .slide {}
.Slideshow .image {}

The only advantage I see to using 'pure' BEM over my modified version is the avoidance of conflict between child elements of different blocks (e.g. .Slideshow .image and .AdvertBanner .image).

This is not a problem for me, because I use LESS, nesting block level rules automatically.

Can anybody suggest other advantages to using 'pure' BEM over my modified version?

Answer 1

What happens if one of your slides is itself a block that contains an image, such as an article. Consider this markup:

<ul class='slide-show'>
  <li class='slide'>
    <img class='image' />
  </li>
</ul>

<article class='article'>
  <p class='text'></p>
  <img class='image' />
</article>

They seem fine on their own and for six months they might be, but it's perfectly reasonable for the <article> block to be nested in the <ul> slide show block, at which point any styles defined on .slide-show .image will effect the article's images too.

By building up modules using BEM and sticking to the naming conventions you guarantee unique classes that won't clash regardless of the order or hierarchy. You know the styles won't leak or be leaked on and you know that you can move the block anywhere in the hierarchy without leakage.