Use consistent CSS naming conventions
SkillDev toolsnaming-conventions is a skill that guides an AI agent when reviewing stylesheets, component styles, and responsive behavior. It checks CSS class naming for consistency and verifies the rendered layout across breakpoints and interaction states before any fix is proposed.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that can load skills.
Then ask your AI: use the Use consistent CSS naming conventions skill
What your AI can do with it
- Review stylesheets for consistent CSS class naming conventions
- Check component styles against naming conventions
- Inspect rendered layout across breakpoints
- Verify interaction states before proposing a fix
Getting started
- Have an AI agent that can load skills.
- Add the naming-conventions skill to the agent's available skills.
- Ask the agent to review a stylesheet or component styles, and it will apply the skill when naming consistency or responsive behavior is involved.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/naming-conventions/SKILL.md and read by ahel’s review.
Without a naming convention, class names become a guessing game — does .active mean the nav item is active, the button is pressed, or a form field has focus? With BEM or a similar methodology, .button--active is unambiguous. This reduces the time spent searching for existing styles and prevents accidental style conflicts.
Quick Reference
- BEM (Block__Element--Modifier) is the most widely adopted naming convention
- Consistent naming lets you understand a class's purpose without reading its styles
- Namespace utility classes and JS hooks separately from component styles
- Use kebab-case for class names (not camelCase or snake_case)
Check
Audit the class names in this CSS file. Are they consistently named? Do they follow a clear convention? Are there any ambiguous names that could conflict?
Fix
Rename classes to follow BEM methodology: Block, Block__Element, Block--Modifier pattern.
Explain
Explain BEM naming convention, why naming conventions matter, and how to apply BEM to a real component.
Code Review
Review stylesheets, component styles, and responsive states related to Use consistent CSS naming conventions. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/naming-conventions
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When is this skill used?
- When reviewing stylesheets, component styles, and responsive behavior related to consistent CSS naming conventions. It also applies when checking rendered layout across breakpoints and interaction states before proposing a fix.
- Does it change my CSS automatically?
- It reviews naming and layout first; fixes are proposed after the layout has been checked across breakpoints and interaction states.
Advanced
- Item type
- skill
- Key
naming-conventions- Source
- github.com/thedaviddias/front-end-checklist