hue / rules

---
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; }
}
```

More agent context in cloudera/hue

10 other files this repository gives its agents.