Nue CSS preview A scaleable alternative to Tailwind, BEM, and CSS-in-JS

Tero Piirainen

@tipiirai

Here's a preview of Nue CSS. The key ingredients are minimalism, and re-usability. The difference is wild: it is possible to build an entire website with the same amount of CSS that goes into a single Tailwind button. Or even crazier: three websites with a single Tailwind Catalyst button.

To understand what's happening here, we need to step back and look closer at what has happened to CSS in the past few years:

BEM: Finding order to chaos

CSS is notoriously hard to manage. It takes years to get a hold of it. Between 2008 and 2014 there were several attempts to bring order: OOCSS, BEM, and SMACSS.

However, these systems failed due to their size and verbosity. Developers lost interest in naming patterns like block-name__elem-name_mod-name_mod-val or the 600 different class names introduced by Bootstrap, which was based on SMACSS.

CSS-in-JS: Clean global namespace

In 2014, Christopher Chedeau from Facebook gave birth to the CSS-in-JS movement. The main idea was to get rid of global namespace pollution. He showcased Bootstrap as the key example of a bad design.

It was a huge success and developers started converting their CSS to JavaScript. We saw a flood of new CSS frameworks like Vanilla Extract, Styled JSX, and Emotion

Tailwind: Inline styling

In 2017, Adam Wathan introduced Tailwind — a new kind of CSS framework with a special styling language. The idea was to inline all styling inside a class attribute so that everything could be expressed with HTML only.

Developers loved it: it was an easy way to build good-looking user interfaces with a copy/paste mentality. Backend developers and junior frontend developers were able to build things without understanding how CSS cascade or specificity works.

The tradeoffs

For the most part, CSS-in-JS and Tailwind worked nicely and frontend engineers were pleased. But it was far from roses.

Massive codebases

We're not talking about "slightly more", or "just double the size". We're talking about a situation where a single button has more CSS than a complete, professionally designed website. And the codebases just keep on growing due to the false beliefs on how CSS works.

Large codebases can draw you down: small styling changes trigger large compilation chains, potentially involving hundreds of JavaScript files and NPM modules before the browser is hot-reloaded. What should take milliseconds, is suddenly taking seconds.

Technical debt

Things work well if you can just copy/paste components and tweak settings, but it gets wild pretty easily. You end up with a codebase that only specialists can understand:

This sort of code is guaranteed technical debt.
This sort of code is guaranteed technical debt.

Single point of responsibility

Today, JavaScript/React developers are responsible for everything. The components are modern-day "kitchen sinks" where content, layout, styling, and business logic are stuffed together.

Things that used to be separate, are now under the responsibility of a JavaScript developer. It's hard or impossible for content creators, designers, and CSS developers to participate.

The talent is inefficiently spread when React developers work on issues outside of their interests. Engineers are not necessarily the best designers and many of them hate CSS.

Your team could do so much better.

What if...

What if we could break away from all these tradeoffs?

Start building websites that look perfect inside out. Where your codebase is ten times smaller and is made out of clean, simple components.

What if we get all the benefits of CSS-in-JS, but none of the problems? No trouble of naming things, nor worrying about cluttering the global namespace.

What if we could offload the burden from JavaScript developers and hand all design/UX work to people who are the absolute masters of that craft?

What would that look like?

Nue CSS

Nue CSS is a more maintainable and scaleable alternative to Tailwind, BEM, and CSS-in-JS. It's new a way to write and structure your CSS. Here are the key differences:

1. Your design is based on a design system

Every Nue project starts with a design system. It's your "single source of truth":

Design system is really a simple concept: you define the master look and feel in a central location and let all your pages inherit from that. Ideally, your design is just a single self-documenting CSS file that even non-technical people can understand. Here are three examples, which all are significantly smaller than a single Tailwind Catalyst button:

Nue makes sure your design is consistently applied across all the pages and components on your website. It automatically binds the correct CSS files to your pages depending on where the page resides. There is no need to tinker with path names with JS/CSS import statements.

The design is fully separated from the HTML structure so that the system can be fully controlled by designers and UX developers. This way, non-technical people can create content so that the pages automatically inherit the correct design. And there is no way they can break the design system with local or inline styling.

2. A new, minimalistic way to write vanilla CSS

The key idea to leave out all class names that relate to styling and let external CSS take care of the element and/or component look and feel:

<!-- component name is all naming you need -->
<div class="gallery">
  <figure>
  <figure>
  <figure>
  ...
</div>

Naming things and minimalism go hand-in-hand. The more names you have, the more complex your design system API. In most cases, the component name is all the naming you need.

Simple means lean and well-organized CSS that is easy to maintain and scale. There's less room for errors: no global namespace issues, no local breaking points, and no consistency issues.

“Less, but better”

Dieter Rams • The grandfather to Apple's design

The simpler you design the system, the better. The fewer colors, font weights, elements, components, and variants you have, the better.

3. No CSS-in-JS layer needed

When everything is based on a single source of truth, it's trivial to ditch the redundant CSS-in-JS layer in front of your design system, be it Tailwind, CSS Modules, or Vanilla Extract. This makes a simpler stack:

CSS-in-JS Tailwind Nue
Key idea Local scoping Utility classes Design system
Styling with JavaScript JavaScript CSS
Conflict resolution Class name obfuscation Domain-specific language Single source of truth
Optimization Tree-shaking + Bundling One large CSS bundle Minimalism + Code splitting + Page inlining

Done. Now let's see the benefits:

Reach new levels of simplicity

Sites made with Nue have extremely little CSS. For example, a basic Tailwind button has more styling than a complete Nue-powered website:

  • Shadcn/UI button

    Base 3.3kCSS 1.3kDSL 0.3k Total 4.9k

  • Aimee App website

    Globals 1.7kDesign 0.9kPages 1.4kClasses 0.1k Total 4.1k

    (16% smaller)
Click for measurement details

It's easy to maintain

The combined amount of CSS in three Nue websites equals the size of a single Tailwind Catalyst button:

  • Catalyst button

    Base 3.3kCSS 5.3kDSL 1.8k Total 10.4k

  • Three Nue sites combined

    Globals 1.7kAll designs 2.8kAll pages 4.6kAll classes 0.4k Total 9.1k

    (12% smaller)
Click for measurement details

Keep things in control

Design-system-powered websites stay lean as the site grows:

  • Catalyst dialog

    Base 3.3kCSS 10.9kDSL 5.7k Total 19.9k

  • Mona Editor website

    Globals 1.2kDesign 0.7kPages 0.9kClasses 0.018k Total 2.9k

    (86% smaller)
Click for measurement details

One line of CSS is easier to maintain than a hundred lines.

Nue Best Practice

Talk about maintainable CSS!

Create motherfu!!ng fast websites

motherfuckingwebsite.com is a developer meme from Barry Smith to demonstrate the power of minimalism. It's a text-only website that does not use CSS at all. Needless to say: it's motherfucking fast:

Click image for details
Click image for details

A surprising fact is that minimal, inlined CSS gets you to the same performance levels with zero compromises on design:

Click image for details
Click image for details

No matter what sort of Turbo-Infuced-Rust-Bundler ™ you use to optimize the irrelevant, nothing beats a tiny TCP packet that has everything to render the landing page.

Talk about performance!

Scale like the best

Nue breaks you out from the single point of responsibility and offloads the burden from the JavaScript/React engineer for the more talented:

Separation of concerns equals scalability: marketers and technical writers proceed with content, designers and UX developers focus on the user experience, and JavaScript developers perfect the back of the frontend. The same applies for one person projects too — all the UX talent just comes from one head.

Talk about scalability!

Stand the test of time

CSS is the styling language of The Web

Any developer with a background in CSS can maintain the codebase. And when you come back later, even years later, the codebase is still sound and clear. There is no fear of technical debt because the CSS you write today is valid forever.

Talk about timeless web design!

We're building the web framework of the future

Nue is a framework for future generations, who demand more from their development stack. Nue CSS was an important step towards our ultimate goal the perfect web framework:

Stay tuned: Nue Design System

Our next release is an actual design system: the kind of stuff that is currently employed in large, design-focused companies only, but we'll make it available for everyone. I'm hoping to get a chance to talk with Brad Frost and get involved in the development of a global design system. It's important. It's the next big thing in CSS development:

Then: Templates

Think complete website templates with marketing, documentation, registration, e-commerce, and blogging areas. Or copy/pasteable components ala Shadcn and Tailwind, with a ten times smaller codebase and seamless integration to your design system.

Become the next Stripe, Linear, or Apple — with the speed levels of a mother-effing website.

These perfected templates will likely have a one-shot price tag because we want to secure the development of Nue for years to come without depending on 3rd party demands.

Join our mailing list

Receive an email when the next milestone is ready. And give us your thoughts! I read them all with care and I answer all questions.


Get started with Nue

Experience the power of Nue hot-reloading and modern CSS:

# Install Bun (if not done yet)
curl -fsSL https://bun.sh/install | bash

# Install Nue
bun install nuekit --global

# Start with a template
bun create nue@latest

Choose Aimee website template, Sofa Company website, or Mona Editor website from the list — ie. one of the first three options:

Enjoy!