🎨 Buzzword Breakdown #24 — “CSS-in-JS”

“Is this project using CSS-in-JS or still relying on .css files?”
Let’s break down what CSS-in-JS actually means — and why teams still use it.

🔹 What is CSS-in-JS?

CSS-in-JS is a styling approach where you write CSS using JavaScript or TypeScript.
It allows you to use logic, variables, functions, and conditions inside your styles.

The goal:

Make styles dynamic, scoped, theme-aware, and colocated with your component logic.

🧠 Simple example

👕 CSS-in-JS using MUI:

const styles = {
  backgroundColor: theme.palette.primary.main,
  padding: '8px',
};

return <Box sx={styles}>Hello</Box>;

Using styled-components:

const Button = styled.button`
  background: ${(props) => props.theme.primary};
  padding: 8px;
`;

❌ Compared to traditional CSS:

/* style.css */
.button {
  background: red;
  padding: 8px;
}

📦 Popular CSS-in-JS Libraries

• ✅ MUI
  Uses sx prop, styled(), and theme from @mui/system
• ✅ Styled-components
  Uses template literals with styled.div\...`andThemeProvider`
• ✅ Emotion
  Offers css, styled, and support for @emotion/react
• ✅ Stitches
  A modern, type-safe CSS-in-JS library with runtime and devtools support
• ✅ Vanilla Extract
  TypeScript-first, compile-time CSS-in-JS for maximum performance

Get Thiraphat Phutson’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

💡 Benefits of CSS-in-JS

• ✅ Dynamic styles based on props, state, or theme
• ✅ Style scoping by default (no global conflicts)
• ✅ Easy to integrate with design tokens
• ✅ Easy theme switching across the app

🚫 Downsides and caveats

• ❌ Performance: Some libraries inject styles at runtime → slower than static CSS
• ❌ Learning curve: Not everyone likes styling inside JS
• ❌ Debugging: DevTools may show generic class names

📌 Is CSS-in-JS still popular?

• ✅ Still widely used in MUI, Base UI, Chakra UI, Theme UI, etc.
• 🔄 But some teams are switching back to Tailwind / CSS Modules / Vanilla Extract
  for better performance and clearer separation of concerns

The truth: It depends on your team, project size, and preferences.

📌 Summary

CSS-in-JS lets you write styles in JavaScript —
keeping them dynamic, colocated, and component-scoped.

Used right → it boosts productivity.
Used wrong → it adds complexity.

🏷️ #buzzwordbreakdown #cssinjs #react #mui #emotion #styledcomponents #frontend #styling