Vanilla Has Never Tasted So Hot
Browse Season 1 Episodes
Well friends, we’re well along into the decades of the 2020s, and the way we describe the presentation of content and functionality on the web has shifted dramatically. The Cascading Style Sheets of today is not the CSS of yesteryear. It’s a whole new world.
In CSS Nouveau, aka Vanilla Has Never Tasted So Hot, you will be introduced to the latest thinking in setting up scalable CSS architectures and crafting modular, future-proof design systems.
If you’re familiar with using specific styling tools or frameworks like Bootstrap or Tailwind or a CSS-in-JS solution, you may be surprised to learn that you don’t need any of those! Vanilla CSS now provides all of the building blocks you need to build web UI without constantly banging your head against a brick wall. Vanilla Has Never Tasted So Hot is a text & audio course featuring hours of fresh material along with many inline code examples to help you get ahead.
What You Will Learn in This Course #
You will gain a firm grasp of the fundamentals of building out a CSS architecture, as you’re guided step-by-step all the way to formulating, designing, and composing web components within a design system. You will have opportunities to ask questions along the way in our dedicated Discord chat channel, and get to show off your work as you create a “business dashboard” using the techniques you’ve just learned!
Episode 1 – Introduction (aka Fasten Your Taste Buds) #
In Episode 1, you’re awakened to the reality of modern “vanilla” CSS, a technology nearly unrecognizable to a 2007-era mindset. (I picked 2007 because so much of what passes for “this is how you write CSS” is rooted in techniques and opinions a decade and a half old by now. Don’t believe me? Guess when BEM was invented? 2005. 🤯)
Instead of outdated practices and weird toolchains, embrace YAGNAFA. (You’ll learn what that goofy acronym means!) And discover how object-oriented views are the key to unlocking encapsulation and avoiding the dreaded “append-only” problem of global CSS.
Episode 2 – The New CSS Reset… #
In Episode 2, you find out just how much you don’t need to reset when you start writing stylesheets from scratch. In the past era of CSS, using a reset was virtually mandatory, simply a given. You might not even know what your framework was retting or why! In the modern landscape, that has all changed. You will learn how to build your own reset, which will likely be much shorter than you might realize!
Episode 3 – How to Organize Your (Global) Stylesheets #
In Episode 3, you’re introduced to the “pyramid” approach to styling as pioneered by Brad Frost, and how your modest array of global stylesheets might apply in this new era of design systems and components. You are provided real-world examples of where files could go within your styles folder and how the preferred structure might change depending on the size and scope of your project.
Episode 4 – Design Tokens from the Ground Up #
In Episode 4, you are taken on a whirlwind tour through the realm of CSS Variables and how they get used throughout a design system. You’re introduced to a few “design token” starter kits provided by open source projects like Open Props and Shoelace, and how CSS functions like calc and clamp can make your tokens responsive.
Episode 5 – Class-Less CSS FTW! #
In Episode 5, you’re presented with a shocking notion: that class= might just be the most abused and least useful aspect of style authoring today. You are instead given a variety of techniques and practices which will help you accomplish the bulk of your styling tasks without ever needing to reach for class= (including taking advantage of CSS variables + the amazing style attribute, as well as ARIA roles and states).
Episode 6 – Div Tag Soup Begone #
In Episode 6, we examine the perennial question: why are there so many gosh-darned <div> tags everywhere on the web? The <div> tag is semantically meaningless…and other than offering a default styling of display: block, does absolutely nothing to help with content nor styling of a webpage. (And <span> is even more of a nothingburger!) So, uh…why use these tags at all? 😵💫
Episode 7 – Components: Modular Thinking #
In Episode 7, you’re introduced to the evolution of how to define “components” in HTML & CSS, along with an overview of custom elements & web component APIs. You follow along an example of building a “card” component using “light DOM” (through global CSS yet scoped via the custom element name), and why you might want to reach for a solution even more powerful. Which leads us to…
Episode 8 – Shadow DOM: The Boss Mode of Modular Layout #
In Episode 8, you witness the power of this fully armed and operational battle station shadow root as it provides fully encapsulated features to the card component, as well as makes it even easier to define a full styling API for customization by component consumers. You also get to learn about potential pitfalls of using shadow DOM, and why the pros often outweigh the cons when developing a design system.
Episode 9 – Zooming Out to the Design System Production Level #
In Episode 9, it’s time for a bit of a recap of everything learned so far, and how to put all these concepts together and approach projects and tasks with a layered, bottom-up approach which lets “CSS methodologies” flow out of good technical architecture organically (and not the other way around). And remember, design systems aren’t just for large enterprise or big teams—they’re good for everyone, even solo devs!
Episode 10 – Final Exercise: Building a Business App UI #
In the season finale of Vanilla Has Never Tasted So Hot, you have the opportunity to build a full web UI in the form of a typical business dashboard. From global styling to page layout to component design to utilizing third-party tools, this is a chance to put everything you’ve learned to practice and (optionally) show off your work to the rest of CSS Nouveau community.