Embrace the Cascade: CSS-in-JS

Libraries & Tradeoffs

Disclaimer

This presentation is not a dig at your preferred workflow*. If you find something that works for you, use it.

 

If you're looking for something new to solve a problem,

this talk will help you navigate the lingo.

* unless your workflow is based on styled-components

Why This talk?

Why This talk?

Why This talk?

But first,

why CSS-in-JS?

Dead code elimination

Make sure the CSS you need is there

Leverage the TS ecosystem

Type-checking, bundling, compilers*

Act I    My perfect library

Act II   BoomerCSS

act III  One more thing

Things to consider:

  • Performance
  • Utility vs Class
  • Rendering patterns supported
  • Is this for a page, or for a design-system?
    • Handling of variance
    • How are other devs gonna extend what you have?
  • Escape hatches
  • Community and Ecosystem
  • Tooling required for good DX
  • Tooling required for good UX
  • Compatibility with vanilla JS, react, solid, vue, etc
  • Bundle size
  • Styling pattern: JS object vs CSS string

 

Runtime

Build time

Styled-components

Vanilla-extract

CSSOM, dynamic styles

"dumb" .css file

When does the code runs?

run-time

but once

Stitches

Performance

Very JS

Just CSS

Styled-components

Tailwind

How much

"it's just CSS"

Theme provider

CSS vars

CSR only

Everything

Styled-components *

CSS-modules

Rendering patterns supported
CSR, SSR, SSG, RSC

* this one is a little bit unfair but I'm sticking with it

Utility-first or atomic

Class-based
Semantic

<button class="text-base font-medium rounded-lg p-3 bg-sky-500 text-white"> 
    Accept 
 </button
<button class="btn-primary"> 
    Accept 
 </button
.btn-primary {
  border-radius: .5rem;
  background-color: rgb(14 165 233);
  padding: .75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: rgb(255 255 255);
}

Utility-first promise

  • Scale with large teams
  • no cascade to deal with
  • no specificity to deal with
  • no CSS stuff to deal with*
  • tiny .css file (great for caching)
  • WYSIWYG
  • safer changes
  • copy paste is fine

Client bundle load

Performance

features / components

added bytes to load

Utility-first

Semantic

And yet...

I want a class based
CSS-in-JS library

Variant-first

Styling coloration

No tooling required

Just typescript
and you're good

Statically extracted

doesn't mean no runtime

Ongoing maintenance cost

Specificity is not an issue anymore*

introducing @layer

Ready for boomers

Act II   Boomer CSS

- Class based

- Statically extracted

- barely any runtime

- variants

- just CSS

Not ready for use

An experiment for now


Let me know
if you're interested

Roadmap

  • Theme overwrites
  • Dynamic variables
  • Better CSS-extraction pattern
  • Better handling of styles/css generation
  • add lightningCSS compiler

Act III   One more thing

Better CSS-extraction?

Ways to extract CSS

  • Compiler approach *
  • Build against a meta-framework
  • Provide plugin(s) for bundler(s)
  • Use macros **

* what BoomerCSS uses

** what BoomerCSS kinda uses

Javascript Macros

  • Kind of comptime in Zig
  • stage 3-ish TC39
  • implemented in Bun / Parcel
  • Not limited to CSS or asset generation
  • generate assets + remove runtime exec cost
Made with Slides.com