CSS-in-JS & Styled Components
CSS-in-JS libraries let you write CSS directly in JavaScript - scoped to components, with dynamic values, and no global conflicts. Popular in React ecosystems with tools like Styled Components, Emotion, and CSS Modules.
CSS-in-JS Approaches
- CSS Modules - MyComponent.module.css. Class names auto-scoped. No global conflicts. Works with any framework
- Styled Components - const Button = styled.button\`background: blue;\`. CSS inside JS template literals
- Emotion - Similar to Styled Components. css prop for inline styling: css={css\`color: red;\`}
- Tailwind (utility) - Not CSS-in-JS but solves similar problems with atomic utility classes
- Pros of CSS-in-JS - Component scoping, dynamic values from props, no global conflicts, co-located styles
- Cons of CSS-in-JS - Runtime cost, larger bundle, learning curve, harder to debug than plain CSS
- Trend - Many teams moving back to vanilla CSS (with @layer + nesting) or Tailwind from CSS-in-JS
CSS-in-JS Examples
/* CSS Modules (React) */
/* Button.module.css */
.button {
padding: 12px 24px;
background: #667eea;
color: white;
border-radius: 8px;
}
.primary { background: #667eea; }
.secondary { background: transparent; border: 2px solid #667eea; }
/* Button.tsx */
/* import styles from './Button.module.css'; */
/* <button className={styles.button}>Click</button> */
/* Class becomes: .Button_button_x7k2m - auto-scoped! */
/* Styled Components (React) */
/*
const Button = styled.button`
padding: 12px 24px;
background: ${props => props.primary ? '#667eea' : 'transparent'};
color: ${props => props.primary ? 'white' : '#667eea'};
border-radius: 8px;
transition: all 0.2s;
&:hover { transform: translateY(-2px); }
`;
// <Button primary>Click</Button>
*/
/* CSS Modules are the safest choice - zero runtime cost,
works with all frameworks, easy to debug */Tip
CSS Modules are the safest CSS-in-JS choice: zero runtime cost (compiled at build time), works with any framework, easy to debug (you can see the original class name), and no learning curve if you know CSS. Start here before considering Styled Components.
Every element follows the box model - content + padding + border + margin
Common Mistake
Using Styled Components for performance-critical pages. CSS-in-JS has runtime cost - styles are generated in JavaScript, increasing bundle size and hydration time. For SSR/performance-sensitive apps, CSS Modules or Tailwind are faster.
Practice Task
Try CSS Modules: (1) Create Button.module.css with .button, .primary, .secondary classes, (2) Import in React: import styles from './Button.module.css', (3) Apply: className={styles.button}, (4) Inspect the auto-scoped class name in DevTools.
Quick Quiz
Key Takeaways
- CSS-in-JS libraries let you write CSS directly in JavaScript - scoped to components, with dynamic values, and no global conflicts.
- CSS Modules - MyComponent.module.css. Class names auto-scoped. No global conflicts. Works with any framework
- Styled Components - const Button = styled.button\`background: blue;\`. CSS inside JS template literals
- Emotion - Similar to Styled Components. css prop for inline styling: css={css\`color: red;\`}