Your first don't is the first thing I say do -- or at least do so that you aren't pissing classes for NOTHING all over the markup. A descriptive class on a container saying WHAT you are containing is fine, but when you go full idiot with .header doing #contact > legend's job is just going full Gungan.

That's part of why HTML/CSS frameworks with their idiotic presentational classes drag practices back to the WORST of bad 1990's coding, and why BEM is just mind-numbingly dumbass. Both doubling or more the markup needed to do things just because "wah wah, I'm too stupid to handle selectors and combinators".

This your "nesting" example -- typical of the garbage the know-nothings who see merit to LESS/SASS/SCSS -- is flawed when in all likelihood there's no reason for that to vary much from "body > header li".

Don't make specificity headaches you shouldn't have in the first blasted place.

Though that example is the first to show that honestly, I doubt your qualifications to even talk about what good CSS is. Why? PX. Something your code quadruples down on the deeper you get into the article, flipping the bird at usability and accessibility.

If you don't know -- or don't care about -- what's wrong with "font-size:16px" you're probably not qualified to tell others how to write CSS.

As evidenced by your then listing BEM as a benefit instead of one of the many scams that teach people to take a giant steaming dump on their HTML, the garbage DIV + H1 markup riddled with classes and possibly elements for nothing, etc, etc, etc.

Laundry lists of how NOT to use HTML or CSS.