Great writeup!

My team found BEM to make a big difference in the organization of our styles. We already used a similar hierarchy, thinking that the naming conventions would be overkill, but after we switched we found out it really helped.

I hope other teams will give it a try!

Thanks @alkshendra,

I'll definitely be using this for my future projects!

The part:

.parent {
    background: red;
    &__child1 {
        background: red;
    }
    &__child2 {
        background: red;
    }
}

seems wrong, the child colors should be green and purple no?

First: BEM stands for "Bug Eyed Monster"

Second: Oh for whizzing on Christmas, more of this pointlessly cryptic, uselessly reliant, "Let's throw classes on EVERYTHING" BS.

Apologies, but this type of "let's use different numbers of the same character" nonsense is almost as idiotic as preprocessors / SCSS; generally speaking resulting in larger markup, failing to leverage element selectors, and reeking of the same type of bad advice as some of the crap that's wormed it's way into Google Pagespeed and CSSLint taking those tools from useful to useless over the past couple years.

I was at LEAST hoping when you said element, you might actually, oh I dunno, USE THE ELEMENT'S ACTUAL SELECTOR, but I guess in the age where people see nothing wrong with throwing endless presentational classes into their code OOCSS style, as evidenced by mouth-breathing halfwit dumbass rubbish like bootcrap and it's kine (and trust me, an archaic plural for cows is TRULY appropriate here) someone encouraging this type of asshattery really shouldn't come as a shock. Seems damned near as annoying as the dipshit garbage that is markdown.

You know what you said about "grandchidren" being something wrong? If nesting 3 deep is "wrong" then you don't know how to build a website -- This is the type of rubbish that if you actually find it useful, you're probably doing something wrong in your HTML and/or CSS! Things like failing to start with semantic markup, only add wrapping containers when you need them, being duped into thinking there's a legitimate reason for ANY of HTML 5's pissing on the structural rules, or simply failing to leverage your semantics in your CSS, blindly throwing classes at everything out of ignorance.

To me, if you are using enough classes to even IMPLEMENT this, your markup must be some sort of fat bloated rubbish and you really need to do the world a favor, back the &!$^ away from the keyboard, and take up something a bit less detail oriented like macramé.

Though to be fair, I say the same thing about bootcrap, yui, jquery, blueprint, grids, and the unbelievably ignorant halfwit nonsense of dicking around in Photoshop and having the unmitigated gall to call it "design" -- when the people using any of the above generally don't seem to know enough about HTML, CSS, JavaScript, or accessibility to be writing websites in the first damned place!

But after nearly 40 years of programming, and being a disciple of Wirth, what do I know... there's a reason C is not my favorite language as it too is needlessly and pointlessly cryptic. What is it I used to joke back in the day? I'd sooner hand assemble 8k of Z80 machine language than deal with 100 lines of C code?

This truly does smell of that same type of "how hard can we make this on purpose?" -- There is SO much ridiculously bad advice and worse practices being thrown at HTML and CSS right now, I cannot fathom how ANYONE could be DUMB ENOUGH to see a legitimate reason to use any of it!

Do you have any examples of actual sites built with this buggery? Bet they're the typical bloated train wrecks of 50+k of markup doing 10k's job and 100K of CSS doing 16k's job.