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 |

Guide méthodologique Angular + BEM CSS pour créer des composants réutilisables et du code front-end partageable. Applique les blocs BEM à l'échelle des composants, l'imbrication maximale de 2 niveaux, la décomposition appropriée des composants, la dénomination des éléments sémantiques, les modèles de modificateurs corrects et les sélecteurs plats. À utiliser lors de l'écriture, de la révision ou de la refactorisation des styles de composants angulaires. Déclencheurs sur des tâches impliquant CSS, SCSS, SASS, le style des composants, la dénomination BEM ou l'architecture CSS. Source : develite98/angular-best-practices.

Voir l'original