Skip to content
Courses CSS Nouveau

CSS Nouveau

Subscribe Today for $59
or $10.99 a month

Seasons

Introduction #

A funny thing happened on the way to the year 2023.

Cascading Style Sheets (CSS) got good. Like, really, really good.

Some said it could never be done. Others said you could only really take advantage of it with clever build tools and abstractions placed on top of it. Still others shouted we should just burn it all down and start over.

Thankfully, we can say with confidence those days are over.

It’s very possible to be a skilled, confident web developer and author real, honest-to-goodness CSS.

Without hacks.

Without vendor prefixes.

Without “proprietary” abstractions and non-standard syntaxes.

Without worrying if everything’s going to break in the next browser update.

And without biting your nails that “append-only” “spaghetti code” stylesheets will render your software architecture brittle, unmaintainable, and slow.

Folks, we’ve finally arrived at the promised land.

And it’s glorious. 🙌

But If Everything’s Now Great, Why Are We Still Fighting? #

Despite everything I just said, there is a battle raging for the soul of the frontend.

How could this have happened? How can we be living in a time when vanilla CSS has gotten so good, and yet remains the butt of jokes and the subject of ire across so many social media threads, blog posts, influencer content, and even official tool marketing?

Tempers flare, accusations are hurled, and lots of people get very sad. 😢

Who knew the venerable design language of the web, CSS, could continue to be a central focal point of such vociferous conversation?

It is a strange time indeed when simultaneously:

  1. CSS has become incredibly powerful, capable of truly extraordinary feats, and is now one of the fastest-iterating specifications on the web. So much so, some people are growing concerned about “new CSS features” fatigue! 😂 (I love it, but trust me, it’s definitely a challenge trying to keep up!)
  2. A certain subsection of the web developer community is going around claiming “vanilla CSS is unmaintainable” and simply can’t be used to build large, modular, and successful websites—often trumpeting viewpoints and data points which are years out of date and often easily refutable.

For example, consider these troubling statements promoted by the top “utility class” framework on the market today:

CSS is global and you never know what you’re breaking when you make a change.

OK, now some real talk. If you use all the tools available to you in modern CSS, you can build completely encapsulated components and even whole page templates which are not, in fact, global. It’s totally possible! 😃👍

Using inline styles, every value is a magic number.

With CSS variables in place, your inline styles can avoid “magic numbers” entirely. 😃👍

Maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS.

Well actually… 😜

Modern, vanilla CSS allows you to deftly describe an entire design system, with all the colors, fonts, spacings, sizes, borders, and other properties you’ll need to maintain consistency and accuracy across your website and even multiple properties. In addition, your HTML & CSS can be successfully co-located as you author your component library and define styling APIs—thus making maintaining both languages the same exact process. 😃👍

Listen, if you’re still reading this, you probably already know that vanilla CSS has indeed gotten “insanely great”. Yay! However, you may be wondering how you can take advantage of all these tremendous advances, and how you can fight back the tide of bespoke third-party DSLs, overly-complex tooling, and vendor lock-in to embrace just what the browser gives us today.

That’s what CSS Nouveau is all about. #

I’ll admit right up front, this isn’t a course to teach you how to write CSS per se. (I’d love to recommend some resources to teach you the basics of CSS if you’d like to get up to speed! More below…)

This also isn’t a course to teach you how to center a <div> or flex a box or add a gaudy gradient to a headline. (Those are all very exciting things, but you can easily come across those solutions elsewhere!)

I’ll tell you what this course is all about: This is a course to teach you how to build and maintain CSS architectures.

Perhaps for some of you, the topics covered in this course—especially at the beginning—may seem obvious. And believe me, I have struggled with the thought that I’m spending a whole lot of time simply stating the obvious, repeatedly.

BUT—here’s what I’ve discovered over the past few years. When it comes to writing maintainable, modular, and encapsulated CSS architectures which entirely avoid “append-only” hell and the accumulation of technical debt over time, the “obvious” is often very non-obvious.

The battle rages on, and it’s an industry-wide problem.

Unfortunately, somehow, the word is not getting out. Like, seriously, vanilla CSS is super, super great now. It’s a powerful and expressive programming language for the presentation of web content and user interfaces. Yes, I said it. CSS is a programming language.

Yet somehow some folks still don’t see it that way. Otherwise very smart, very talented programmers who instinctively understand all sorts of best practices around how to structure code and how to “name things” (one of the hard problems of computer science as they say) and how to guard against spaghetti code and “spooky action at a distance” and various other architectural issues…suddenly draw a blank when it comes to implementing clean CSS architecture.

And the kicker is, instead of researching what’s possible today and what they might have overlooked, they’ll say it can’t be done! 🧐

Some of the knocks against vanilla CSS I hear time and time again are just baffling. Baffling!

I don’t mean to beat a dead horse here, but I am truly flabbergasted how vanilla CSS architecture that works is routinely dismissed like some mythical fantasy creature which nobody’s ever really discovered.

Good CSS architecture is achievable. I’ve done it. You can do it too!

Listen, like you I’m getting tired of going around and around and around on arguments which simply haven’t been valid in years. This is aggravating experienced frontend developers, confusing the hell out of newbies, and holding our industry back. But it’s not too late for a massive course (pardon the pun!) correction.

Thankfully, YOU have the power, you have the ability, to short-circuit these fruitless debates.

You can write modern CSS in a way that is scalable, well-architected, and fit to purpose over time.

You can define design systems that will serve your various projects and organizations well for years to come.

You can write component libraries which properly encapsulate their internals and don’t allow styles to “leak out” all over the rest of the website (and conversely are hard to break from the outside where yahoos might be meddling about!)

You can learn how to craft component variants and “one-offs” for special page templates or features without gunking up your base global stylesheets with unmaintainable cruft.

You can learn how to leverage CSS variables at all levels of your DOM trees for intelligent, customizable styling APIs and targeted overrides when needed.

You can learn how both CSS and HTML can work hand-in-hand for better code comprehension and proper separation of concerns (but not separation of locality), even as you enter into the fantastic new world of custom elements and (optional) web component APIs.

You can learn how to keep the semantics of HTML content and the accessibility of your web pages top of mind as you reason about how to structure your templates and your components.

Some of this stuff can be challenging, sure. But some of it is actually rather easy once you get the hang of it. All you need is permission to start. And a helpful lens through which you can view the myriad of decisions which go into crafting a design system.

“But Jared, my project isn’t that big. I don’t think I need a design system! Isn’t that for massive enterprises and large teams?”

Doesn’t have to be. You can build a simple design system in a day or two—especially if you reach for a set of design tokens or a “classless” CSS framework which already exists.

Design systems can scale down to a blog, a photography portfolio, a modest e-commerce shop, an internal business dashboard…or they can scale up to major properties serving thousands of users every day.

I’m not here to teach you what your design system should be. I’m here to teach you how to craft a design system which works for you, your projects, and your teams—even if that’s dozens and dozens of people across a variety of disciplines…or a team of one.

And honestly, you don’t need “CSS-in-JS” or “utility classes” or even “CSS modules” (though that’s perhaps the most benign of tooling out there at this point) to get there. All you need is vanilla HTML, CSS, a pinch of JavaScript perhaps, and maybe a little productivity boost by utilizing PostCSS or Sass (though I personally stick to 100% vanilla CSS throughout this course).

It really is remarkable what web standards let us accomplish today. And at the rate they’re advancing right now, I’ll probably need to revise and extend CSS Nouveau on a fairly regular basis! That’s my cross to bear…

But enough preamble. What exactly are you going to learn in this course?

What is in CSS Nouveau? #

This course can be thought of as a “series”, and “season one” has just come out. In Season 1: Vanilla Has Never Tasted So Hot across 10 episodes, you will learn:

Further details about all of these episode topics can be found on the Season 1 page directly, and you can also read a bit of each episode for free!

Who is Teaching CSS Nouveau? #

photo of Jared White

Hi! I’m Jared White (@jaredwhite@indieweb.social). I’ve been a professional web developer and blogger for many years, and I’m also the creator of the progressive site generator Bridgetown as well as the author of several frontend-focused NPM packages.

I care deeply about the open web, developer happiness, minimizing complexity, and educating the next generation of creators and producers on the web. I firmly believe in a “polyglot” web, where a variety of languages, tools, operating systems, and philosophies can all build upon and innovate on top of the core web platform. I believe in open specifications and open protocols, not vendor lock-in.

I got into this whole web thing originally because I saw it as this incredible equalizer and force for individual creative expression. I guess you could say I’m an “internet hippie” and I always will be. So nothing bugs me more than companies which come along and try to convince the n00bs the only way they can successfully build for the web is to do it their (proprietary) way. That [insert trendy framework/build tool/cloud platform name here] new hotness you think “everybody’s using” today? It could be old and busted tomorrow. Are you merely learning tooling du jour, over and over again? Or are you learning the “native” web platform, a platform which has been relevant for 30 years and counting—and will still be relevant 30 years from now?

Vanilla forever!

“Sounds Great, Jared. How Do I Begin?” #

One of the goals of The Spicy Web is to get all of this groundbreaking content into the hands of as many people as possible, so we’ve partnered with Intuitive Future to provide all of our course material as part of the affordable Intuitive+ subscription service. For only $10.99 (or less!) a month, you gain instant access to all content now and in the future here at The Spicy Web. Yes, that’s right. Future seasons of CSS Nouveau (and there will be future seasons), as well as other series coming down the pike, will all be yours. And Intuitive Future’s pledge to members is once you’ve locked in a subscription price, you’ll remain at that price forever, even if prices increase (way) down the road for brand-new members. What a deal!

We also have a lively Discord server where you’ll get access to a dedicated channel to ask questions, share ideas and projects you’re working on, and suggest additional material all related to CSS Nouveau. Exciting!

So I encourage you to peruse the rest of the preambles and synopsis, and when you’re ready to embark on this thrilling journey of crafting and building your own CSS architectures and design systems, join Intuitive+ and let the fun commence!

Resources for Learning the Basics of CSS #

If you’re thinking perhaps all of this is a bit over your head and you just want to learn some of the basics of styling webpages with CSS (or you need a refresher prior to embarking on this course), here are some free public resources I can highly recommend:

(Also don’t feel like you need to download all of that firehose of information right out of the gate. Once you feel like you wouldn’t be totally lost, you can hop on back here! ☺️)

Season 1:
Vanilla Has Never Tasted So Hot