Details
Language / Topic
JavaScriptCategory
Styling
Rules
balanced
- Use `.module.css` files for component-scoped styles. Import as objects: `import styles from "./Button.module.css"`.
- Use `camelCase` class names for cleaner JavaScript access: `styles.primaryButton` instead of `styles["primary-button"]`.
- Import styles as `import styles from './Component.module.css'` — use `styles.className` for scoped, collision-free class names.
- Colocate module CSS with components: `Button.tsx` + `Button.module.css` in the same directory.
- Use CSS custom properties (`:root` variables) for shared design tokens across modules.
- Use `:global(.className)` sparingly for styles that must escape module scoping.
- Compose styles with `composes: base from "./shared.module.css"` for reusable patterns.