0Pricing
CSS Academy · Lesson

BEM: Block Element Modifier Naming

Apply the Block-Element-Modifier methodology to create predictable, reusable class names.

What is BEM?

BEM (Block–Element–Modifier) is a naming convention that creates self-describing class names. It makes CSS components predictable and self-documenting.

Block

A Block is a standalone, meaningful UI component that can exist independently. It is the root class of the component.

/* Blocks: */
.card { }
.nav { }
.button { }
.search-form { }

All lessons in this course

  1. Why CSS Architecture Matters
  2. BEM: Block Element Modifier Naming
  3. File Organization: ITCSS and 7-1 Pattern
  4. Avoiding Specificity Wars
← Back to CSS Academy