A one-page BEM reference, every snippet explained line by line: the naming grammar, blocks, elements, modifiers, the markup and stylesheet side by side, flat specificity, and the mistakes people make.
BEM is a naming convention, not a framework, so the whole of it fits on one page. The difficulty is never the syntax but the judgement: whether a thing is a block or an element, why a modifier goes alongside the base class instead of replacing it, and why the names stay flat even when the markup is three levels deep. This sheet gathers the pattern, a full worked component and the common mistakes, each snippet annotated line by line. Keep it open while you build, or save the image and pin it nearby.
For the full background, read the guide to writing predictable CSS with the BEM methodology. To practise, work through the 10 code-along examples.
Hope this helps, Andrei.
[…] BEM Methodology Cheatsheet […]