[jmsuth]

This isn't a realistic example of how you should use BEM, you would never have a block, element, and modifier in one class. The "block" class would be used in a div that wraps the elements:

    <div class="block">
        <div class="block__item">
            I am an item
        </div>
        <div class="block__item block__item--danger">
            I am a dangerous item
        </div>
    </div>

Your simplification relies on an HTML hack and can potentially be more confusing when modifier names start colliding.

[jrobn]

Yuck. I would follow the advise in this blog post [1].

https://www.smashingmagazine.com/2013/08/semantic-css-with-i...