Details
Language / Topic
TypeScriptCategory
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"]`.
- Use `typed-css-modules` or `typescript-plugin-css-modules` for TypeScript autocompletion on CSS module 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.