Nick Saunders

Creator of @CSSHooks - UI/UX and FP focus

[Nick Saunders @agilecoder]

What if StyleX used inline styles?

I ported StyleX's own site from StyleX to inline styles and benchmarked both.

The result? The inline style version was just as fast (or faster) on every PageSpeed metric I checked.

I'm not arguing inline styles are faster. Just that performance isn’t the major concern many people claim it is. 🧵

[Nick Saunders @agilecoder]

@colinhacks Wow, instead of delivering codegen magic, extra build steps, and loads of transitive dependencies, here's a NPM package that actually makes life simpler. Well done @colinhacks - can't wait to try it out!

[Nick Saunders @agilecoder]

@machathewriter Some prefer extra steps.

[Nick Saunders @agilecoder]

@EgeMustafaCelik @machathewriter But what if you can?

[Nick Saunders @agilecoder]

@vish_dev09 Would the `style` prop be considered CSS? 🤔

[Nick Saunders @agilecoder]

@laurilllll Anything the product team writes outside the layer wins. Unfortunately, the same is true for all unlayered styles. I've written about it here: https://t.co/NiW8RiGdRQ

[Nick Saunders @agilecoder]

In my first blog post of 2025, I explore a few reasons why the CSS cascade is generally something to avoid and what you can use instead. Please let me know what you think!

https://t.co/tWZGaXdxA9

[Nick Saunders @agilecoder]

@heyJordanParker @aviralj02 Also quite useful for donut scope:

@𝚜𝚌𝚘𝚙𝚎 (.𝚌𝚊𝚛𝚍) 𝚝𝚘 (.𝚌𝚊𝚛𝚍-𝚌𝚑𝚒𝚕𝚍𝚛𝚎𝚗) {
.𝚝𝚒𝚝𝚕𝚎 {
𝚏𝚘𝚗𝚝-𝚠𝚎𝚒𝚐𝚑𝚝: 𝚋𝚘𝚕𝚍;
}
}

The .𝚝𝚒𝚝𝚕𝚎 ruleset applies only until the nested .𝚌𝚊𝚛𝚍-𝚌𝚑𝚒𝚕𝚍𝚛𝚎𝚗 boundary is reached.

[Nick Saunders @agilecoder]

@aviralj02 Yes! The ironic thing for component architecture though is that separation between markup and stylesheet that undermined local reasoning. @\scope gets more interesting when used within inline styles.

[Nick Saunders @agilecoder]

@HookForm Love the Function as Child Component pattern. Much better than hooks for colocation and conditional rendering paths.

[Nick Saunders @agilecoder]

@g2sans @tannerlinsley First I'm hearing of Datastar. Looks like HTMX...

[Nick Saunders @agilecoder]

@kenn Flags in @CSSHooks v4 do with CSS what previously would make you reach for React Context. https://t.co/V6XDAP9lpH

[Nick Saunders @agilecoder]

Experimenting with flags in CSS Hooks. Flags determine this Panel's background, while cycle() rotates them at each nesting level.

Purely CSS-driven. No React Context or props.

How would you build this Panel in your styling framework of choice?

[Nick Saunders @agilecoder]

@oldstackjournal Custom properties, but specifically not the way most people use them.

[Nick Saunders @agilecoder]

Flags will ship in CSS Hooks v4. For now:

npm install @css-hooks/react@next

Run it: https://t.co/9hesPp8sab

Source: https://t.co/Zv8poiIb6O

[Nick Saunders @agilecoder]

Experimenting with flags in CSS Hooks. Flags determine this Panel's background, while cycle() rotates them at each nesting level.

Purely CSS-driven. No React Context or props.

How would you build this Panel in your styling framework of choice?

[Nick Saunders @agilecoder]

@purefunctor Awesome! What makes it a superset of PureScript?

[Nick Saunders @agilecoder]

@ekander_ Why ReScript and not Scala 3?

[Nick Saunders @agilecoder]

@MiTypeScript @vercel @v0 @tailwindcss Show me the Network tab.

[Nick Saunders @agilecoder]

@jacobmparis @CSSHooks I’ve found that to be a challenge as well. I don’t think this kind of abstraction generally replaces hooks, but maybe it replaces certain hooks.

[Nick Saunders @agilecoder]

@jacobmparis @CSSHooks Please let me know if you have any feedback or would be interested in collaborating on this.

[Nick Saunders @agilecoder]

@jacobmparis Library is still in a rough state - I'm focusing on @CSSHooks v4 at the moment - but if you'd like to check it out: https://t.co/MQuKdsB4aK