Sass in 2022: Still the Organizational Layer CSS Lacks
In this episode of the Smashing Podcast, Vitaly Friedman sits down with Stephanie Eckles — front-end engineer, creator of ModernCSS.dev, and host of the Word Wrap podcast — to discuss whether Sass still earns its place in a modern CSS workflow. The conversation also covers her path into web development, why she remains committed to static site generation with 11ty, and which native CSS features she believes will eventually replace what preprocessors do today.
From Flash to a Career in Front-End
Eckles' introduction to the web came not through HTML or CSS, but through Macromedia Flash. After learning keyframe animation at a summer camp, she moved into building with WordPress — which she used for roughly a decade — before finally landing in front-end development as her specialty. That background in marketing and advertising, she notes, shaped how she approaches building for the web today.
On the question of whether it has become harder to get started publishing online, Eckles says the answer depends heavily on how someone is introduced to web development. For those coming through bootcamps, the tooling can seem overwhelming. But for those exploring casual interest, she points to static site generators like 11ty as a genuinely low-friction entry point. "You don't have to worry about SSR, it's just simply static," she says, highlighting that most marketing pages and homepages are largely static anyway.
While 11ty is best suited for projects without dynamic content needs, Eckles notes that the edges are expanding — she's currently working on a project involving user authentication, combining static output with edge and serverless functions. She believes the boundaries of what's possible in static builds are being pushed further out all the time.
Why She Still Keeps Sass Around
Despite CSS custom properties having been widely supported for years, Eckles continues to reach for Sass in her workflow — and she doesn't see that changing soon.
Her primary reason: organization. Sass gives her the ability to manage stylesheets through a clear file structure. "I think that's where a lot of folks begin to have a less than pleasant relationship with CSS, is trying to figure out how to organize," she says. For her, Sass is the tool that solves that particular pain point.
She pairs Sass with a pragmatic approach to BEM. While she uses individual class names and a component-oriented architecture, she doesn't always rely on classes alone. She finds it more powerful to focus on semantics and sometimes use element selectors that hook into accessibility features. Alongside these methods, custom properties play a major role in her styles, particularly for creating scalable variations of components — a central topic in her SmashingConf workshop on leveling up with modern CSS.
Where Native CSS Takes Over — and Where It Won't Yet
As CSS evolves, many features that historically required Sass — variables, mix-ins, color manipulation — are moving into the browser. Eckles says she's already adapting her usage as a result. The :is() and :where() pseudo-classes have simplified selectors in ways that previously required custom logic, and custom properties have filled the gap that mix-ins used to cover in many cases. She firmly believes features that belong in the browser should be used natively.
But there are still gaps. "I still use Sass for functions — absolutely," she says. Generating utility styles by looping through design tokens remains genuinely useful, and that functionality is still nowhere on the horizon for native CSS. The same applies to better management of token-level configuration in design systems. So while she's happy to move parts of her workflow to the browser, Sass is still her go-to for the organizational layer and functions.
BEM vs. Tailwind: A Question of Portability
When asked about whether BEM is outdated — a frequent critique in conversations centered around utility-first approaches like Tailwind — Eckles pushes back. "It's just a naming convention," she says. The key for her is that BEM lends itself to more portable stylesheets that can be shared across different contexts, like a Nunjucks template in 11ty and a React-powered back-end application.
She also cautions against assuming universal framework adoption. "Not everybody is using a JavaScript framework — if we look at global stats, that's actually a pretty minor part of the web." Tool selection, she argues, should always depend on the project's architecture and the team's skillset. Ready-to-use documentation is a legitimate consideration, but Tailwind and similar utilities are only the right answer for certain teams and project types.
Container Queries and :has() — A Combined Shift
When asked what excites her most among recent browser announcements, Eckles points immediately to container queries and :has(). Coming from a design systems background, she sees the two features as a one-two punch that will finally enable robust, scalable components that weren't achievable before.
Container query units, she adds, will also provide a native path to fluid typography — something that previously required more creative solutions. As she looks at what's left on her wishlist for CSS, she suggests expanding media query behavior to additional contexts, such as browser zoom level and other device features. But privacy constraints and hardware limitations remain barriers for some of those ideas.
Learning Outside the Usual Channels
As for her own learning habits lately, Eckles recommends finding inspiration beyond traditional articles and documentation. She's been watching developers on Twitch, pointing to Salma Alam-Naylor and Alex Trost's Frontend Horse community as resources worth checking out.
Her closing advice to developers: "Experiment, play and share what you know."
The full transcript of this episode is available below, where Stephanie discusses everything from IE 7 bugs to the future of static site tooling, modern CSS workshops, and the inevitable retirement of Internet Explorer — which officially received its end-of-support just in time for the conversation.
You can find Stephanie through her website at thinkdobecreate.com, follow her on Twitter as @5t3ph, and check out her ModernCSS.dev project. SmashingConf also hosts her workshop "Level-Up With Modern CSS" — her next session takes place July 11–25, and tickets are still available.
