BEM Conventions

Let's start with this. BEM(Block Element Modifier) is all new to me. So I'm learning as I go along. I always thought my CSS was pretty modular, especially after I started using LESS and SASS.

This is what's confusing

The docs on here and here suggest writing code like this:

block {}  
block__element {}  
block__element_modifier {}  

But that doesn't appear to be the standard being used widely on the web. If you search for BEM many of the results suggest the following:

block {}  
block__element {}  
block__element--modifier {}  

I understand that BEM is more about methodology rather than the actual writing of the code, but it's strange that the official docs suggest one way but everybody is doing it another.

Even a quick Twitter poll shows that everybody is following the second pattern.

This all seems to have stemmed from one article written in 2012 by Nicolas Gallagher.

Has anybody else been confused by this? Or haven't you read the official docs and just followed the crowd?

It'd be great to know what you think. Get in touch.