What are "HTML-CSS-JS" and "CSS-in-JS", anyway?
Tags: explainlikeimfive, discuss, css, javascript
Published: 2019-01-30 12:51:42

---
title: What are "HTML-CSS-JS" and "CSS-in-JS", anyway?
published: true
description: There's a lot of debate around these frontend strategies! There's not a consensus definition of what they even are. Let's fix that, and add some nuance!
tags: explainlikeimfive, discuss, css, javascript
---

Yesterday afternoon, an early-career developer I know DMed me to ask: "_What_ are people defining as CSS-in-JS, anyway?" They had seen a lot of the debates flying around the internet, but didn't know how to engage with The Discourse, because no one was bothering to define terms. As I thought about how to answer them, I realized... "CSS-in-JS" is a large, umbrella term! There are a lot of different "CSS-in-JS" techniques out there, and some of them are closer to "traditional" HTML-CSS-JS approaches than others!

A lot of the HTML-CSS-JS vs JS-JS-JS debate is rooted in [historical context and feelings](https://twitter.com/betsythemuffin/status/1090342513054007296) rather than precise technical details. I don't think that trying to turn it into a purely technical discussion is a good idea, because there's so many other social dynamics in the room. But I also think that the technical aspects of the discussion will be healthier if we _bother to define our terms_. In that spirit, I'd like to talk about some specific front-end strategies I've observed.

## TL;DR
From breaking these strategies down, the best working definition I can figure out of CSS-in-JS:

> any technique which uses JavaScript to apply styles *universally*, as opposed to applying styles in response to user behavior.

## "Separate file" CSS.
**Generally not considered CSS-in-JS**

CSS is developed in `.css` (or `.scss`, or `.less`) files that are maintained separately from `.js` files. In development, they are generally be kept in a separate `stylesheets` directory. These CSS files might be preprocessed from several small files into a larger CSS bundle, or they might not. If the CSS uses component-oriented techniques, developers use BEM or another naming convention to ensure that component-level styles stay component-level.

## Web components and Shadow DOM
**Generally not considered CSS-in-JS**

No strong conventions around "where" the CSS is kept yet here because it's a young technique! But in this style, Shadow DOM style isolation is used to ensure that component-level styles stay component level.

## Component-level CSS with _informal_ scoping
**Generally not considered CSS-in-JS**

CSS is (usually) developed in `.css`/.`scss`/`.less` files that are maintained in the same directory as other component files (e.g. HTML, JS, JSX). This strategy also covers `.vue` files that do **not** use the `scoped` attribute in their `style` block. These styles are preprocessed into a larger file for delivery, but no data attributes or "roboclasses" are added to enforce component scope. Instead, developers have to use BEM or another naming convention to ensure that component-level styles stay component-level.

## JS-applied utility classes
**Sometimes considered CSS-in-JS**

A utility class framework like Tailwind or Tachyons is maintained in a separate file. All components are rendered by JS, and use that JS to decide which utility classes to apply to HTML elements within the component.

## Component-level CSS with JS-enforced scoping
**Sometimes considered CSS-in-JS**

In this frontend strategy, CSS is used for styling in conjunction with component files OR is embedded in those component files, `.vue` style. The Vue `scoped` attribute or a plugin like React's `styled-components` is used during processing to add a "roboclass" prefix to the component's styles for scoping. This "roboclass" is applied during client or server rendering of the component, so this strategy *requires* that JavaScript be used for template rendering.

## JS-applied inline styling
**Pretty much always considered CSS-in-JS**

All components are rendered by JS, and use that JS to decide which specific inline styles to apply to HTML elements within the component. "CSS modules" fall into this category.

----

I'm dashing this post off quickly before leaving for a month-long trip. My list isn't intended as exhaustive and my explanations may not be as clear as I'd want them to be in a more polished post. I'd really appreciate it if y'all could help fill in things I've missed or handwaved, so that this post/discussion can become a strong resource for folks who are confused by CSS-in-JS discourse.

I'd appreciate it if y'all kept your opinions about these technologies OUT of the discussion. I intend to write a follow-up post about what I perceive these technologies' strengths and weaknesses to be. I'll welcome your opinions in *that* comments section! But right here, I'd like to keep it to definitions, to maximize this post/discussion's usefulness as a resource.