styling-and-design-tokens.mdc 709 B

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