angular-css-bem-best-practices_skill

Overview

This skill is an Angular + BEM CSS best-practices guide that helps teams create reusable, component-scoped styles and shareable front-end code. It enforces one BEM block per component, limits nesting to two levels, and ensures semantic element and modifier naming. Use it to standardize styling during development, review, or refactoring of Angular components.

How this skill works

The skill inspects component selectors and style rules to verify that each Angular component maps to a single BEM block name and that selectors are flat (no descendant or tag-qualified selectors). It flags deeper-than-allowed nesting, recommends extracting child components when structure is too complex, and validates modifier and element naming patterns. The guidance includes bad/good examples and actionable fixes for CSS, SCSS, and SASS.

When to use it

• Writing CSS/SCSS/SASS for new Angular components
• Reviewing component styles during code review
• Refactoring legacy styles into a component-based architecture
• Designing a CSS architecture for a new Angular project
• Deciding whether to split a component because styles are too deep

Best practices

• One component = one BEM block; block name should match the component selector (minus prefix)
• Limit nesting to block and block__element only; extract child components for deeper structure
• Use semantic, descriptive kebab-case for elements (describe what, not how)
• Use --modifier for variants and states, always paired with the base class
• Keep selectors flat: avoid descendant, child, and tag-qualified selectors

Example use cases

• Converting a monolithic component with many nested selectors into multiple smaller components with clear BEM blocks
• Enforcing consistent class naming during a pull request review to avoid cascade and specificity issues
• Refactoring SCSS that uses nested selectors into flat BEM classes to improve reuse and portability
• Designing a component library where each exported component exposes a predictable BEM API
• Implementing class bindings in Angular templates using correct modifier patterns for stateful variants