angular-css-bem-best-practices
✓用于创建可重用组件和可共享前端代码的 Angular + BEM CSS 方法指南。强制执行组件范围的 BEM 块、最多 2 级嵌套、正确的组件分解、语义元素命名、正确的修饰符模式和平面选择器。在编写、审查或重构 Angular 组件样式时使用。触发涉及 CSS、SCSS、SASS、组件样式、BEM 命名或 CSS 架构的任务。
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 方法指南。强制执行组件范围的 BEM 块、最多 2 级嵌套、正确的组件分解、语义元素命名、正确的修饰符模式和平面选择器。在编写、审查或重构 Angular 组件样式时使用。触发涉及 CSS、SCSS、SASS、组件样式、BEM 命名或 CSS 架构的任务。 来源：develite98/angular-best-practices。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/develite98/angular-best-practices --skill angular-css-bem-best-practices- 分类
- </>开发工具
- 认证
- ✓
- 收录时间
- 2026-02-02
- 更新时间
- 2026-02-18
快速解答
什么是 angular-css-bem-best-practices？
用于创建可重用组件和可共享前端代码的 Angular + BEM CSS 方法指南。强制执行组件范围的 BEM 块、最多 2 级嵌套、正确的组件分解、语义元素命名、正确的修饰符模式和平面选择器。在编写、审查或重构 Angular 组件样式时使用。触发涉及 CSS、SCSS、SASS、组件样式、BEM 命名或 CSS 架构的任务。 来源：develite98/angular-best-practices。
如何安装 angular-css-bem-best-practices？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/develite98/angular-best-practices --skill angular-css-bem-best-practices 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/develite98/angular-best-practices
详情
- 分类
- </>开发工具
- 来源
- skills.sh
- 收录时间
- 2026-02-02