Why Stylus is the best CSS preprocessor that nobody uses

To this day, there hasn’t been a CSS compiler that I loved more than Stylus. Because it was JavaScript-based, it was possible to do incredible (and crazy) things with it. Back then, I rejected Bootstrap internally and built my own handcrafted frameworks inside app.styl.

My goodbye to Stylus was sad, but necessary. Now that the drama is over, let’s get to the story — which is what really matters.

Nostalgia warning: this is a "boomer dev" post reminiscing about the good old days. And you know what? Those days weren’t even that good. Memorable? Absolutely. But with so much manual work, the classic programmer was almost a bricklayer of bits!

The birth of Sass and Compass

When everything was still wild west, my knowledge of css was, obviously, plain css. It was a love-hate relationship: you hated repeating yourself, working in a rigid way; it was easier and more organized to have a menu.css, header.css, article.css than that 400-story monolith.

And it got worse: with the rise of “modern” browsers (by the way, I’m still waiting for a truly modern one — all we get are customized Chromiums), we had to add even more verbosity with --webkit, --moz, --o. Not to mention the adaptations for legacy browsers (yes, that dinosaur in the middle of the room called Internet Explorer).

To solve this problem, Sass and Compass emerged. It was a huge mess: Compass used .sass (indented syntax), but the market preferred Sass, which used .scss (with braces). Compass was amazing, but it brought weight (literally): it ran on Ruby, which made the build slow and painful.

And why did I use Compass? For one simple reason:

• I didn’t need to use semicolons
• I didn’t need to use braces

Until the day came:

Deprecated: Compass is no longer supported

I confess I didn’t have the bandwidth to maintain a library like that — it was better to accept defeat. Web work has always been about using the best tools available, and Compass had lost its momentum. It was in this search for a new ceiling that I found Stylus.

Stylus opened CSS’s Pandora’s box

Created by the legendary TJ Holowaychuk — yes, none other than the same person behind Express and Mocha — Stylus arrived with a transformative premise: modernize cascading styles to the maximum. If Sass removed the braces, Stylus removed everything. You didn’t need colons :, semicolons ;, or braces {}.

logoH = 60px

.toolbar
	display flex
	align-items center
	justify-content space-between
	gap 4px
	.logo
		height logoH
		img
			height 100%
			object-fit contain

It was — and still is! — magical. At the time, purists said that the lack of rigid syntax confused the compiler and slowed the build by a few milliseconds. A small price to pay for such a work of art. But the real power was in JavaScript. Since Stylus was “JS-first,” you could create complex logic as if you were programming the backend:

// Yes, this is a JS-style comment inside a stylesheet.
// Remember how painful it was to create margin utilities? 
// Well... In Stylus, just a loop that looked like pure JS:

generate-spacings(limit)
  for i in (1..limit)
    .m-t-{i}
      margin-top: (i * 10)px
    .p-a-{i}
      padding: (i * 8)px

// 🗿 Chama! (Call the function)
generate-spacings(5)

// There’s more: functions that accept parameters like JS?
apply-glassmorphism(opacity = 0.5, blur = 10px)
  background rgba(255, 255, 255, opacity)
  backdrop-filter blur(blur)
  border 1px solid rgba(255, 255, 255, (opacity / 2))

.card
  apply-glassmorphism: 0.3, 15px

There was nothing more satisfying than using those automated, elegant, beautiful grids built with js.

Tools don’t die because they are bad. They die when the human cost of using them exceeds the technical benefit.

The market’s hand is relentless

Stylus still exists — so why did I stop?

Because in our careers, we often have to give up what is “good” for us in favor of what is “good” for the team. I was — and it seems I still am — the only Stylus guy. No one wanted to learn that “weird syntax.” The result was the forced return to Sass (SCSS), the standard that put food on the table.

The present and the future have a name

And that name is Tailwind.

Hard confession: I don’t miss Stylus in daily work. I miss the freedom to choose tools for technical pleasure, and sometimes, while debugging a hover:focus:ring-2 class, I catch myself missing that apply-glassmorphism function. I like today’s efficiency — the time I would spend on preprocessors is now available to generate and apply new ideas, explore new concepts, and test applications.

But this post isn’t about Tailwind — that’s for another one!