--- description: SCSS + BEM rules; forbid hardcoded colors; attach to style files. globs: ["**/*.scss", "**/*.less"] alwaysApply: false --- # Styling Rules - **Primary:** SCSS with BEM; avoid adding new Less. Do not automigrate when touching unless you can easily migrate the entire file. - **No hardcoded colors**; use SCSS variables/tokens (cuix/antd) from - Co-locate `ComponentName.scss` with the component; keep selectors BEM-scoped. - Prefer BEM modifiers over state classes - Prefer classes over using HTML element selectors ## Example ```scss @use 'variables' as vars; .component-name { &__title { color: vars.$hue-primary-color-dark;; } &--disabled { opacity: .5; cursor: not-allowed; } } ```