Two Days, One Rewrite

I rewrote the entire TriFrost website’s styling in a day.

No SCSS pipeline. No cascade overrides. No build steps. Just createCss(), use(), mix(), and a bit of media logic — all baked into the engine we’ve been refining.

🧼 From SCSS to Style Engine

The site used to rely on a Sass pipeline — about 20 SCSS files compiled into a global stylesheet.

Components used shared class names, and layout logic got scattered across layers of overrides and guesses. It worked, but it wasn’t great. Most of the time, I was writing class soup instead of styles.

Now everything lives next to the component. Typed, local, composable.

const cls = css.use('f', 'fa_c', {
  backgroundColor: css.$t.body_bg,
  [css.media.desktop]: css.mix('fh', {padding: css.$v.space_l}),
  [css.media.tablet]: css.mix('fv', {padding: css.$v.space_s}),
});

That replaced what used to be a chain of .layout, .tablet, .is-centered, .bg-dark, and a handful of overrides.

Now it's readable, deterministic — and most importantly: typed.

No typos. No guessing. Your definitions, theme and variables follow you across the app with full autocomplete. Pass the wrong key 🔥? TypeScript catches it ✨.

🧠 What I Learned

Migrating the site wasn’t a lab experiment. It was real-world usage: deeply nested markup, syntax highlighting, responsive layout, theme tokens.

• The ergonomics feel solid. mix() and use() scale cleanly from atomic blocks to full-page layouts.
• But there's still headroom. css.use(...) inside loops? It works — but we can do better.

TriFrost doesn’t settle for “it runs.” It’s designed to be fast, typed, and fun.

⚙️ What’s Next

Coming soon, layered caching within the style engine:

• Style objects that resolve to the same thing? Cached.
• Repeated use() calls across renders? Cached.

We’ll use TriFrost’s built-in memory store to track styles globally and per request — keeping the engine fast and frictionless without sacrificing determinism.

When it comes to styling, the goal is the same as everything TriFrost: no loss of control, no build tools, no magic.

And now, no SCSS either. ✌️