Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Published
4 min read
Archived

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

All You Need To Know About CSS-in-JS

An overview of CSS-in-JS and its relevance in modern web development

CSS-in-JS brings CSS to the component level, moving away from the traditional document-level styling approach.

You’ve likely come across terms like CSS-in-JS, Styled Components, Radium, and Aphrodite.

You might be wondering, “Why should I care? I’m perfectly fine with CSS in traditional .css files.”

CSS-in-JS is a topic that often sparks debate. I encourage you to keep an open mind and consider if it might enhance your workflow. Ultimately, the goal is to use tools that make you more efficient and content in your work.

Maintaining a large collection of stylesheets has always felt cumbersome to me, so I’m always looking for new approaches.

Many developers are curious about alternative styling methods. CSS-in-JS has emerged as one of the most promising concepts. Let’s explore why it might be worth trying.

What is CSS-in-JS?

import styled from 'styled-components'
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #BF4F74;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);

CSS-in-JS is a powerful abstraction over traditional CSS. It allows you to describe styles using JavaScript in a declarative and maintainable way. This approach leverages JavaScript’s capabilities to manage CSS at runtime and even server-side. It’s framework-agnostic, lightweight (around 6KB minified and gzipped), and extensible through a plugin API.

It’s important to note that inline styles and CSS-in-JS are not the same. Here’s a demonstration to clarify the difference.

The Difference

Not all CSS features can be replaced by JavaScript event handlers. For example, pseudo-selectors like :disabled, :before, and :nth-child aren’t possible with inline styles, and styling html and body tags is not supported.

However, with CSS-in-JS, you can use the full range of CSS features. Since it generates actual CSS, you can use any media query or pseudo-selector you need. Some libraries, like jss and styled-components, even add support for non-native features like nesting!

Why Not Just Stick With CSS?

Traditionally, we’ve used CSS at the document level, but modern web development revolves around components, not pages. CSS was not originally designed for a component-based approach. CSS-in-JS addresses this gap. A shout-out to Vue for handling this well, although Vue’s styles don’t have access to component state.

What Are the Benefits of Using CSS-in-JS?

  • Component-Based Thinking: Manage styles at the component level, eliminating the need to maintain numerous stylesheets.
  • Leverages JavaScript’s Power: Enhance CSS by tapping into JavaScript’s ecosystem.
  • True Isolation of Rules: CSS-in-JS ensures that styles don’t unintentionally inherit properties from parent elements, thanks to tools like the jss-isolate plugin.
  • Scoped Selectors: CSS-in-JS prevents selector collisions by generating unique class names, unlike traditional CSS, which has a global namespace.
  • Automatic Vendor Prefixing: No need to worry about vendor prefixes; they’re handled for you.
  • Code Sharing: Easily share constants and functions between your JavaScript and CSS.
  • Efficient DOM Management: Only the styles currently in use are rendered in the DOM, reducing clutter.
  • Dead Code Elimination: Unused styles are removed automatically.
  • CSS Unit Testing: You can write unit tests for your styles.

What Are the Drawbacks of Using CSS-in-JS?

  • Learning Curve: It takes time to learn this new approach.
  • Additional Dependencies: You’ll need to manage new libraries in your project.
  • Onboarding Challenges: New team members might take longer to adapt to a codebase using CSS-in-JS.
  • Challenging the Status Quo: Introducing CSS-in-JS might disrupt established workflows, though this isn’t necessarily a bad thing.

Despite these challenges, the advantages of CSS-in-JS far outweigh the drawbacks. It’s worth giving it a try!

All of these libraries offer extensive functionality, including theming, dynamic props, server-side rendering, and more.

If you found this article helpful, you might enjoy my free newsletter. I share developer tips and insights to help you grow your skills and career.


More Articles You Might Enjoy

If you enjoyed this article, you might find these related pieces interesting as well. If you like what I have to say, please check out the sponsors who are supporting me. Much appreciated!

Javascript
3 min read

JavaScript's ??= Operator: Default Values Made Simple

A guide to using ??= in JavaScript to handle null and undefined values elegantly

Nov 5, 2024
Read article
Tech
4 min read

Chrome Is Beta Testing Built-In AI. Could This Kill a Lot of Startups?

The Power Play: Gemini Nano in Chrome

Aug 31, 2024
Read article
Webdev
3 min read

CSS ::target-text for Text Highlighting

A look at how browsers can highlight text fragments using CSS ::target-text, making text sharing and navigation more user-friendly

Dec 17, 2024
Read article
React
4 min read

How To Fetch Data From an API With React Hooks

Fetch data in React applications using the power of React Hooks

Jun 21, 2019
Read article
Tech
5 min read

Is Age Really a Factor in Tech?

Silicon Valley has a reputation for youth worship. The 'move fast and break things' mentality often translates to a preference for younger, supposedly more adaptable workers.

Oct 8, 2024
Read article
Leadership
4 min read

Build Your Army

If you want to do great things, you'll need people with skills that complement yours. You can't do everything yourself. You need a team. You need an army. You need to build your army.

Oct 4, 2024
Read article
Open source
4 min read

Remove Unnecessary NPM Packages with eslint-plugin-depend

We don't need packages to handle basic JavaScript tasks

Aug 13, 2024
Read article
Open source
5 min read

dependency-time-machine: An Easier Way to Update NPM packages

Automatically update your package.json dependencies one by one in chronological order, ensuring compatibility and reducing errors

Sep 18, 2024
Read article
React
5 min read

Boost React + Redux Performance with Reselect

Selectors are a powerful tool to optimize state selection and enhance performance in your React and Redux apps.

Oct 2, 2019
Read article

Become a better engineer

Here are engineering resources I've personally vetted and use. They focus on skills you'll actually need to build and scale real projects - the kind of experience that gets you hired or promoted.

Many companies have a fixed annual stipend per engineer (e.g. $2,000) for use towards learning resources. If your company offers this stipend, you can forward them your invoices directly for reimbursement. By using my affiliate links, you support my work and get a discount at the same!


This article was originally published on https://www.trevorlasn.com/blog/all-you-need-to-know-about-css-in-js. It was written by a human and polished using grammar tools for clarity.