Skip to content

Instantly share code, notes, and snippets.

@KHCode

KHCode/bem.txt

Last active August 4, 2023 16:14
Show Gist options
  • Save KHCode/c3679ab2f03c30c25a5ac72d31ccc20b to your computer and use it in GitHub Desktop.
Save KHCode/c3679ab2f03c30c25a5ac72d31ccc20b to your computer and use it in GitHub Desktop.
Download ZIP
Summary of BEM Naming Methodology
Raw
bem.txt
BEM Naming Methodology For CSS
B is for Block.
Block is another word for component, as in web component, in this context.
Each block has a unique name.
Examples: ".card", ".hero", ".nav", ".header", ".footer"
E is for Elements.
Elements of a block are the same as descendents of a component in this context.
Blocks can have many elements.
Each element is given a unique name, prefixed by the name of the block it is in.
Examples: ".card__title", ".card__body", ".nav__menu", ".nav__home"
M is for Modifiers.
Blocks and elements can have modifiers.
Each modifier is postfixed to the name of whatever it is modifying.
Examples: ".card--primary", ".card--secondary"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment