Articles Tagged css-in-js

This is a masterclass from Dave:

After you hit the wall of unremovable complexity, any “advances” are a shell game, making tradeoffs that get passed down to the user … you get “advances” by shifting where the complexity lives.

You don’t get free reductions in complexity. In CSS land, you don’t get to pick some styling strategy and have all your troubles go away. This is plenty of nuance here, but largely whatever technologies you pick, you’re just placing the … Read article “Tradeoffs and Shifting Complexity”

To add inline styles on an element in JSX, you have to do it in this object syntax, like:

<div style={{
  fontSize: 16,
  marginBottom: "1rem"
}}Content
</div

That might look a little weird to us folks who are so used to the CSS syntax, where it is font-size (not fontSize), margin-bottom (not marginBottom), and semi-colons (not commas). … Read article “CSS2JS”

Brent Jackson says CSS utility libraries failed somewhat:

Eventually, you’ll need to add one-off styles that just aren’t covered by the library you’re using, and there isn’t always a clear way to extend what you’re working with. Without a clear way to handle things like this, developers tend to add inconsistent hacks and append-only styles.

I have a feeling Tailwind people would disagree. I have no particular opinion here, I’m just noting that Tailwind seems to have a more fervent … Read article “Two Steps Forward, One Step Back”

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,

We just made a note about this article by Jeremy Wagner in our newsletter but it’s so good that I think it’s worth linking to again as Jeremy writes about how our obsession with JavaScript can lead to accessibility and performance issues:

What we tend to forget is that the environment websites and web apps occupy is one and the same. Both are subject to the same environmental pressures that the large gradient of networks and devices impose. Those constraints