CSS-in-JS — Complete Guide
CSS-in-JS — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.
On this page
CSS Tutorial · Lesson 74 of 100
CSS-in-JS
Foundations & Layout ✓ → Responsive & Motion ✓ → Architecture & Perf → Projects
Architecture & Perf · 3 — Scale · ~15 min read · CSS — Framework Integration
1. Introduction
Level up: CSS-in-JS. Think architecture, performance, and maintainable design systems.
CSS-in-JS writes styles in JavaScript — styled-components, Emotion, Stitches — generating class names at runtime or build time with props and theme access.
2. Real-world story
SaaS customer white-label uses theme JSON injected at login.
Outcome: CSS-in-JS applies tenant colors without rebuilding CSS bundle.
3. Why it matters
StyleVerse dynamic theming for multi-tenant SaaS maps tenant config to JS theme object consumed by CSS-in-JS components.
4. Visual understanding
Read this diagram — the mental model for CSS-in-JS.
Component ├── structure (HTML/JSX) └── styles (CSS Modules / Tailwind / tokens) Theme: light/dark via data-theme or class on <html>
5. Key concepts (easy words)
| Idea | Meaning |
|---|---|
| What | CSS-in-JS writes styles in JavaScript — styled-components, Emotion, Stitches — generating class names at runtime or build time with props and theme access. |
| Remember | Styles as JS objects or template literals. Theme prop drives multi-tenant colors. Build-time CSS-in-JS reduces runtime cost. |
| Practice tip | Change one property, refresh, watch DevTools Computed. |
6. How it works
- Card component function reads theme from props — surface, radius, border come from tenant config object at runtime.
- Styles as JS objects or template literals.
- Theme prop drives multi-tenant colors.
- Check the result in DevTools → Computed and the box model overlay.
7. Choose wisely
| Option | Notes |
|---|---|
| Do | Practice CSS-in-JS on a small StyleVerse card |
| Avoid | Copying huge frameworks before learning core CSS |
8. Try this example
Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.
const Card = styled.div((props) => ({
padding: "16px",
background: props.theme.surface,
borderRadius: props.theme.radiusMd,
border: `1px solid ${props.theme.border}`,
}));
/* theme = { surface: "#fff", radiusMd: "8px", border: "#e0e0e0" } */Line walkthrough
| Code | What it means |
|---|---|
const Card = styled.div((props) => ({ | Selector — picks which elements get these declarations. |
padding: "16px", | Declaration — property and value that change appearance. |
background: props.theme.surface, | Declaration — property and value that change appearance. |
borderRadius: props.theme.radiusMd, | Declaration — property and value that change appearance. |
border: `1px solid ${props.theme.border}`, | Selector — picks which elements get these declarations. |
})); | Ends the rule block. |
9. Another real-world angle
10. Best practices checklist
- Prefer classes over ids for reusable StyleVerse components.
- Use design tokens (CSS variables) for color and spacing.
- Mobile-first media queries; test keyboard focus.
- Keep specificity low — avoid !important except rare overrides.
- Animate transform/opacity when you can; respect prefers-reduced-motion.
11. Common mistakes
- Generating new styled component inside render loop.
- Duplicating all tokens in JS instead of importing shared package.
12. Practice in the browser
- Define theme object per tenant in React context.
- Create styled components reading props.theme.
- Use sx prop pattern in Emotion for one-off overrides.
- Extract static styles to reduce runtime cost.
Experiments
- Add variant prop switching padding size in styled fn.
- Use @emotion/styled with css prop on plain div.
13. FAQ
Where should I put CSS for CSS-in-JS?
Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.
Why is my rule not applying?
Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.
Flexbox or Grid for this?
Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.
14. Interview questions
Explain CSS-in-JS simply.
CSS-in-JS writes styles in JavaScript — styled-components, Emotion, Stitches — generating class names at runtime or build time with props and theme access.
How do you debug CSS?
Inspect element, toggle declarations, read Computed styles, outline the box model, and reduce specificity conflicts.
How does this show up in production UI?
CSS-in-JS applies tenant colors without rebuilding CSS bundle.
15. Remember
- Styles as JS objects or template literals.
- Theme prop drives multi-tenant colors.
- Build-time CSS-in-JS reduces runtime cost.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
