angular-css-bem-best-practices

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。

原文を見る