Angular SCSS BEM Standards

Overview

Use this skill to keep component styles predictable, reusable, and easy to review. Prefer component-scoped BEM classes and keep selectors flat by default.

Workflow

1. Identify the component selector and define one block name.
2. Map required elements and modifiers before editing template or style files.
3. Implement classes in template first, then write SCSS with flat selectors.
4. Validate against the checklist in references/review-checklist.md.
5. If selector context needs more than one descendant level, split into child components.

Component Structure & Scope