angular-css-bem-best-practices
✓Angular + BEM CSS methodology guide for creating reusable components and shareable front-end code. Enforces component-scoped BEM blocks, max 2-level nesting, proper component decomposition, semantic element naming, correct modifier patterns, and flat selectors. Use when writing, reviewing, or refactoring Angular component styles. Triggers on tasks involving CSS, SCSS, SASS, component styling, BEM naming, or CSS architecture.
Installation
SKILL.md
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.
| 1 | Block = Component Selector | CRITICAL | bem-block-selector | | 2 | Max 2 Levels of Nesting | CRITICAL | bem-max-nesting | | 3 | Split Child Components | CRITICAL | bem-split-components | | 4 | Element Naming Conventions | HIGH | bem-element-naming | | 5 | Modifier Patterns | HIGH | bem-modifier-patterns |
| 6 | No Cascading Selectors | HIGH | bem-no-cascading |
Angular + BEM CSS methodology guide for creating reusable components and shareable front-end code. Enforces component-scoped BEM blocks, max 2-level nesting, proper component decomposition, semantic element naming, correct modifier patterns, and flat selectors. Use when writing, reviewing, or refactoring Angular component styles. Triggers on tasks involving CSS, SCSS, SASS, component styling, BEM naming, or CSS architecture. Source: develite98/angular-best-practices.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/develite98/angular-best-practices --skill angular-css-bem-best-practices- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-02
- Updated
- 2026-02-18
Quick answers
What is angular-css-bem-best-practices?
Angular + BEM CSS methodology guide for creating reusable components and shareable front-end code. Enforces component-scoped BEM blocks, max 2-level nesting, proper component decomposition, semantic element naming, correct modifier patterns, and flat selectors. Use when writing, reviewing, or refactoring Angular component styles. Triggers on tasks involving CSS, SCSS, SASS, component styling, BEM naming, or CSS architecture. Source: develite98/angular-best-practices.
How do I install angular-css-bem-best-practices?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/develite98/angular-best-practices --skill angular-css-bem-best-practices Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/develite98/angular-best-practices
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-02