CSS-in-JS

styled-components, Emotion, or similar

Language / Topic

JavaScript

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.

- Define styles outside of render functions to prevent creating new style objects on every re-render — use `styled()` or `css()` at module level.

- 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).