CSS-in-JS

styled-components, Emotion, or similar

Language / Topic

TypeScript

Rules

CSS-in-JS · balanced balanced

- Use a CSS-in-JS library (styled-components, Emotion, or Panda CSS) for component-scoped, dynamic styles.

- Colocate styles with components. Use the `styled` API or `css` prop for styling.

- Use `styled()` at module level for typed styled components — inline `css()` in render only for dynamic styles that depend on props.

- Use theme objects for design tokens: colors, spacing, typography, breakpoints.

- Use `ThemeProvider` for app-wide theming and dark mode support.

- Use tagged template literals (`styled.div`) or object syntax (`css({ color: "red" })`) consistently — pick one.

- Extract reusable styled components for design system primitives (Button, Card, Input).