angular-css-bem-best-practices
Angular + BEM CSS Best Practices
A methodology guide for combining Angular's component architecture with BEM (Block Element Modifier) CSS naming convention to create reusable components and enable code sharing in front-end development. Contains 6 rules with bad/good examples in CSS, SCSS, and SASS.
When to Apply
Reference these guidelines when:
- Writing CSS/SCSS/SASS for Angular components
- Naming CSS classes in Angular templates
- Reviewing component styles for consistency
- Deciding whether to split a component based on styling complexity
- Setting up CSS architecture for a new Angular project
- Refactoring existing styles to follow BEM methodology
Core Principles
More from develite98/angular-best-practices
angular-best-practices-v20
Angular 20+ performance optimization guidelines with Signals, httpResource, signal inputs/outputs, @defer, and native control flow (@if, @for). Use when writing, reviewing, or refactoring modern Angular code. Triggers on tasks involving Angular components, services, data fetching, bundle optimization, or performance improvements.
271angular-best-practices-legacy
Angular 12-16 performance optimization guidelines with NgModules, RxJS patterns, and classic template syntax (*ngIf, *ngFor). Use when maintaining or working with pre-v17 Angular codebases. Triggers on tasks involving Angular components, services, modules, or performance improvements in legacy projects.
34the-art-of-naming
Comprehensive naming convention guide for TypeScript and Angular applications. Covers casing rules (camelCase, PascalCase, UPPER_CASE), prefix conventions (I for interfaces, _ for private, T for generics), boolean naming, the S-I-D principle (Short, Intuitive, Descriptive), context duplication, and structured naming patterns (P/HC/LC for variables, A/HC/LC for functions). Use when writing, reviewing, or refactoring TypeScript code. Triggers on tasks involving naming, variables, functions, interfaces, or code style.
33