📏 BEM Naming Convention Rules

  • 1. Block: Standalone entity (e.g., card, nav).
  • 2. Element: Part of a block (e.g., card__title). Use double underscores __.
  • 3. Modifier: Flag that changes look or behavior (e.g., card--large). Use double dashes --.
  • 4. Names should be lowercase and can contain single hyphens (e.g., main-container).
  • 5. Hit 'Generate Classes' to get the standard CSS selector list.

BEM Class Generator

Architect Your CSS

Coding is easy, but maintaining it is hard. Master BEM, Atomic CSS, and SASS architecture on CodeWithMSMAXPRO.me.

GET THE FULL COURSE →
CSS Academy