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.

원본 보기