Good class names make your CSS easier to understand and maintain.
When names are clear, developers can quickly know what a style does without reading the whole file.
Professional projects always follow naming rules instead of random class names.
Meaningful class names explain purpose, not appearance.
This makes your code future-proof.
Naming by purpose is better than naming by color or size.
Designs change, but purpose usually stays the same.
This structure keeps related styles together.
It is easy to find and update later.
Common naming rules
- Use lowercase letters
- Use hyphens instead of spaces
- Avoid numbers without meaning
- Keep names short but clear
- Be consistent across the project
Consistency is more important than perfection.
Pick a style and follow it everywhere.
Practice task
Rename these classes:
- .a1 → meaningful name
- .redbox → purpose based name
- .bigtext → role based name
Apply the new names in CSS and HTML.
Next lesson
In the next page, you will learn how to organize CSS files for large projects.