CSS-in-JS
ELI5 — The Vibe Check
CSS-in-JS is the controversial philosophy of writing your styles in JavaScript instead of CSS files. Fans love the co-location and dynamic styling. Haters say you're shipping a CSS runtime for no reason. The debate has launched a thousand Twitter threads and zero conclusions.
Real Talk
CSS-in-JS refers to a pattern where CSS is authored using JavaScript, enabling dynamic styling, scoped styles, and co-location with component logic. Libraries like styled-components and Emotion generate unique class names at runtime, though the trend is shifting toward zero-runtime alternatives.
When You'll Hear This
"CSS-in-JS was the future until everyone realized the runtime cost" / "The pendulum is swinging back to regular CSS with scoping"
Related Terms
CSS Modules
CSS Modules are like giving every CSS class a unique ID badge so they never clash with each other.
Emotion
Emotion is CSS-in-JS that gives you two flavors: the styled-components-like syntax AND a css prop for inline styles.
Styled Components
Styled Components lets you write CSS right inside your JavaScript using tagged template literals.