“CSS-in-JS” has been talked about a lot already, and it’s the source of a lot of debate. But I won’t get into all of that here because I want to focus on just one aspect of the debate: What is best for designers?

Note: I’m going refer to “CSS-in-JS” as “Component-Oriented Styles” from here on out, because JavaScript really doesn’t have much to do with it. “CSS” will refer to the traditional way of writing .css files with selectors and all.

One of the big arguments I’ve heard against “Component-Oriented Styles” is that “Real CSS” (with selectors and all) is better for designers because designers don’t understand JavaScript and/or components.

To use an Australianism: “Yeah, nah.” (English: “I get what you’re saying, but no.”)

Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers.

When you work closely with designers to create a design system without any code, you end up with a bunch of isolated components which can be composed together in many different ways. From “atoms” to “molecules” to “organisms” each component is cleanly defined and separated and they don’t affect the elements around each other.

So when someone says CSS selectors are useful for designers, I think “What weirdo designers have you been working with?”

Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process.

Okay okay... most designers. You're special. But we both knew that already

Look at some of the tools designers have been building specifically for the web. Sketch for example:

Or at Iconic Creator:

Or Framer:

Each of these have trees of components which are made up of other components and elements (often named different things). Each element in the tree is independently styled. It's not built around cascading styles and the expectation is that you can copy any element and place it anywhere else and it will look identical.

You also won't see anything that even resembles selectors. Designers aren't creating workflows where they compose together sets of styles onto a single element based on its position in the tree. Instead, they break elements apart into the reusable and composable subsets. Then they create named variants of components which are sort of like variables.

You see this again and again in every single design tool. Clearly designers know what they want and it's clearly not what we've been trying to sell to them as developers with stuff like #TheCascade or selectors.

Design tools are already creating Component-Oriented Styles and they have been for awhile. We need to align with them as developers and we're starting to do that with ideas like CSS-in-JS and Stylable.

Whether we introduce new paradigms to CSS to align it with components, or wrap CSS in JavaScript component frameworks, or come up with something entirely new— It doesn't matter. Thinking in components is to think like a designer. Designers had it right all along.