Chapter 23 — Class Naming Conventions

Choose one naming convention and apply it consistently across a component or page.

New concepts

block__element naming, modifiers, and awareness of the three conventions already present in this workbook.

Read the Naming gauge

What changes after Layout System?

Reusable layout classes need predictable names. This chapter makes the convention explicit so container, section, and component classes stay readable together.

Lessons

  1. 1. Name a component with block__element
  2. 2. Compare conventions and pick one

Checkpoint

Rebuild a small nav or card using one convention only. Explain why a double-underscore chain like nav__menu__btn is common but not strict BEM.