This article is full of a bunch of data from Aggelos Arvanitakis. But lemme just focus on his final bit of advice:
Investigate whether a zero-runtime CSS-in-JS library can work for your project. Sometimes we tend to prefer writing CSS in JS for the DX (developer experience) it offers, without a need to have access to an extended JS API. If you app doesn’t need support for theming and doesn’t make heavy and complex use of the
css
prop, then a zero-runtime CSS-in-JS library might be a good candidate.
“Zero-runtime” meaning you author your styles in a CSS-in-JS syntax, but what is produced is .css
files like any other CSS preprocessor would produce. This shifts the tool into a totally different category. It’s a developer tool only, rather than a tool where the user of the website pays the price of using it.
The flagship zero-runtime CSS-in-JS library is Linaria. I think the syntax looks really nice.
import { css } from 'linaria';
import fonts from './fonts';
const header = css`
text-transform: uppercase;
font-family: ${fonts.heading};
`;
<h1 className={header}>Hello world</h1>;
I’m also a fan of the just do scoping for me ability that CSS modules brings, which can be done zero-runtime style.