Component
The reusable object: card, button, nav, modal.
Platform under construction
Naming Classes
Class names are communication. A good class name tells future developers what a thing is, not just how it looks today.
.course-card {}
.course-card__title {}
.course-card--featured {}
.course-card.is-selected {}
Architecture mental model
Good class names describe purpose before appearance.
CSS class names are a contract between HTML and CSS. Once a class name spreads through templates, changing it becomes real work.
A useful name describes the component, part, state or utility. A weak name describes one temporary visual detail that may change next week.
You do not need to use BEM exactly, but you do need a naming system that is consistent enough to scale.
Element
A part that belongs to the component: card__title.
Modifier
A variation: card--featured or button--primary.
State
Current behavior: is-active, is-open or data-state.
Visual model
See the system before adding more selectors.
.course-card
The standalone component.
.course-card__title
A named part inside the block.
.course-card--featured
A variation of the block.
.is-active
Temporary UI state, not permanent identity.
Good CSS versus fragile CSS
Purposeful names
.course-card {}
.course-card__title {}
.course-card__meta {}
.course-card--featured {}
.course-card.is-selected {}Visual or random names
.blue-box {}
.big-text2 {}
.new-card-final {}
.leftthing {}Rules of thumb
Architecture should make the next CSS decision easier.
Name the role
Use the component purpose rather than a temporary color or size.
Use one pattern
A simple consistent pattern beats three naming philosophies in one project.
Keep selectors shallow
A clear class name is better than long descendant selectors.
Separate state from identity
is-active describes current state; nav-link describes what the element is.
Avoid date and version names
new, final and v2 become lies quickly.
Design for search
A class name should be easy to find in templates and CSS.
Production thinking
Scalable CSS is boring, searchable and hard to break.
Why does this matter?
Names are how a project remembers its own structure. Bad names make CSS feel random even when the declarations are correct.
Accessibility
State classes should match accessible states where relevant. If something is open visually, aria-expanded should usually agree.
Production note
Document the naming convention in the project README before multiple developers start inventing their own.
SEO note
Class names are not SEO content, but a maintainable frontend makes it easier to keep semantic HTML clean.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Rename .course-card to .green-box and explain why that is weaker.
- Add .course-card__action for a link or button.
- Add .is-selected and decide whether it should also update ARIA.
Practice assignment
Do this before moving to the next lesson.
- Pick one component and write block, element and modifier class names.
- Replace one visual class name with a purpose-based name.
- Write one sentence explaining your naming convention.
Try it yourself
Rename visual classes into component classes
Self-check
Before you continue, prove that you understand Naming Classes.
Answer these questions before moving on. If you cannot find, name or move a rule safely, the architecture still needs work.
- Can you name a component without using its color?
- Can you tell the difference between element and modifier?
- Can you avoid selectors that depend on too much HTML structure?
- Can you search a class name quickly across the project?
- Can you keep state names consistent?
Senior audit upgrade
Naming still matters in utility-heavy projects.
Even if a project uses utilities, component names still communicate purpose, boundaries and state.
Avoid visuals only
.blue-box says less than .pricing-card.
Avoid over-nesting
Deep class chains make components hard to move.
Name states
Use clear state hooks such as .is-open or data-state="open".