Naming Convention

BEM (Block Element Modifier): A popular naming convention using block__element--modifier pattern.

Configure Your Class Name

Generated Class Names

Full Class Name
-
Block Only
-
Block + Element
-
CSS Usage Example
/* Enter a block name to see CSS example */
HTML Usage Example

Quick Reference

BEM

Block Element Modifier

.block__element--modifier
  • Block: Standalone entity
  • Element: Part of block (double underscore)
  • Modifier: Variation (double dash)

SUIT CSS

Structured class names

.ComponentName-descendant--modifier
  • PascalCase components
  • Descendants with single dash
  • Modifiers with double dash

Custom

Your own convention

.prefix-block_element-modifier
  • Define your separators
  • Add custom prefixes
  • Full control over format