Beyond Component Naming: A Conversation About CUBE CSS

In this episode of the Smashing Podcast, host Drew McLellan sits down with Andy Bell, the creator of CUBE CSS, to unpack what sets this methodology apart from established naming conventions like BEM, SMACSS, and OOCSS. Rather than focusing purely on class nomenclature, Bell explains how CUBE CSS rethinks the entire approach to styling on the web.

What Is CUBE CSS?

CUBE CSS is a methodology that emphasizes composition and scalable, maintainable stylesheets. While traditional systems tend to prioritize strict naming rules for components, Bell’s approach leans into the natural behaviors of CSS—such as the cascade—and treats them as features to be harnessed rather than avoided.

Bell positions CUBE CSS not as a rigid framework, but as a set of guiding principles that allow developers to write styles that grow gracefully with a project. Its structure acknowledges that real-world styling often involves a mix of broad layouts, reusable components, and utility-like tweaks.

The methodology starts with a clear emphasis on consistency. Rather than defining patterns in isolation, Bell suggests approaching formatting through a lens of predictability that draws on modern layout tools like flexbox and grid, making responsive design a more natural byproduct of the system.

How It Compares to BEM and Friends

Where BEM, SMACSS, and OOCSS introduce elaborate naming conventions to keep specificity low and selectors flat, CUBE CSS looks to reduce complexity at a conceptual level. Bell explains that his approach relies less on a global string of naming conventions and more on local decisions that feel natural to the developer.

The key differentiator, Bell argues, is that CUBE CSS encourages restraint: you do not need a naming convention for every possible UI part. If a piece of UI is only used once, it likely does not deserve its own component class. This helps to keep codebases lean and minimizes the overhead that comes from these larger, more prescriptive patterns.

The Cascade as a Core Tool

In many modern methodologies, the cascade is viewed as a hazard. Bell challenges this narrative by embracing it. In CUBE CSS, the cascade is an asset that helps manage state and context, cutting down on repetitive code that overrides rules manually.

This philosophy extends to how styles apply in context—what happens on hover, focus, or within a specific layout—without needing to invent higher-level abstractions. This results in styles that are more intuitive to write and easier to reason about when returning to a project.

Show Notes and Resources

Note: Listeners of the Smashing Podcast can save 40% on Andy’s Learn Eleventy From Scratch course using the code SMASHINGPOD.

Weekly Update

CUBE CSS: A Methodology That Starts With The Cascade

Andy Bell has spent over a decade building for big-name clients. Along the way, he co-authored Every Layout with Heydon Pickering and launched Piccalilli, a newsletter and course platform. His latest project, though, is a CSS methodology called CUBE CSS, which he’s positioned as an alternative to the more rigid structures many developers have adopted. In a conversation with Drew McLellan, he laid out what CUBE stands for, why he built it, and where it fits alongside existing approaches.

CUBE is an acronym for Composition, Utility, Block, Exception. Bell’s framing is important: it’s not a framework, but a thinking structure for organizing CSS. He notes that BEM (Block Element Modifier) has served as a default for years, but his mixed-client work—spanning teams of traditional CSS developers and JavaScript-focused programmers — left him needing something that sits between strict component systems and freeform styling.

“It’s an extension of CSS,” Bell says. “We should still write CSS as CSS is supposed to be written. Cascading Style Sheets.” That means embracing the cascade rather than working against it. For Bell, the problem with many component-heavy methodologies is that they push developers toward micro-optimizations. “I’ve gone down that path where I see people creating spacer components,” he adds. “The way I fixed it was to start thinking about things on a compositional level instead.”

The Layers Of CUBE

Composition

The composition layer is about building skeletal page layouts that components can be dropped into. Bell uses layouts like the “switcher” from Every Layout, which lays items inline until a calculated width threshold is reached, then stacks them. The key is that the browser determines the outcome: you set upper and lower bounds, but you don’t force a rigid grid. “If you can lay out a three-column grid, do it. Otherwise, just stack and space,” he summarizes.

This layer handles grid and flexbox contexts, but it also covers global concerns like vertical rhythm. Bell describes using a flow component—elements that follow siblings get a top margin via a custom property. You can then adjust that spacing in a specific composition by overriding the property value. The control comes from high-level contexts rather than per-component rule duplication.

Utility

Utilities are single-purpose classes. A wrapper utility, for example, applies a max width and centers an element with auto margins. Design tokens drive many utilities, mapping token names to classes that apply background colors, text colors, or sizing. Bell is clear that this overlaps with approaches like Tailwind CSS, which he says he genuinely likes for rapid product work. But he tries to draw a line: “Tailwind goes a little too far, whereas I like to rein it in when it goes beyond applying a single rule on a class.”

Block

Blocks are the BEM-like components most developers will recognize. The difference is that by the time you reach the block level, a lot of the visual work has already happened at the utility and composition layers. A block should be small and concerned mostly with context-specific rules — a card’s image height or its padding, for instance — not with restating the entire visual treatment. Bell uses components as “a collection of rules that extend what’s already been done.” Rather than being the single source of truth for an element, blocks add only the remaining specifics.

Interestingly, Bell sees blocks as technically a form of composition themselves, but one that needs a distinct name to avoid getting “recursive” and confusing. He suggests that a block might contain other blocks or elements — a card with a heading, summary, and button — but you shouldn’t be targeting those children specifically. Instead, you write rules that apply regardless of content, so unexpected additions still look acceptable.

Exception

Exceptions replace BEM’s modifiers, and here CUBE makes its most distinctive choice: Bell uses data attributes, not additional classes, to flag these states. This gives a clear visual signal when scanning HTML that an element is in an altered state, and it also serves as a clean interface between CSS and JavaScript.

“Say you’ve got a status message, and JavaScript will add data-state which is either success, error, or information. You can hook into that with your exception styles,” Bell explains. Because a data attribute takes only one value, you don’t run into the conflict of multiple modifier classes trying to change the same property. He notes that this has been the most controversial aspect of CUBE, but he insists it’s optional. “The CUBE police aren’t going to come knocking at your door,” he laughs.

Interestingly, Bell’s view of exceptions aligns with how modern reactive JavaScript and CSS have become entwined. “It makes sense to handle state changes appropriately between CSS and JavaScript because they are becoming more and more entwined,” he says. State is ultimately a shared concept between the two.

Much of the CUBE approach is about positioning components within an broader architecture. “In BEM, the component is the source of truth. Until you put that class on the element, nothing is applied,” Bell says, contrasting this with his own workflow where “by the time you get down to the block level, most of your styling has actually been done.”

Adopting And Adapting CUBE

So, can CUBE be layered onto an existing project? Bell says yes, but it depends on what you’re starting with. “If you’ve got a Bootstrap job and it’s just got thousands of lines of custom CSS, you might be trying to put a fire out with a bottle of water,” he warns. A structured but drifted BEM codebase, though, can be refactored—CUBE helps pull things back into a clearer shape.

Likewise, CUBE doesn’t demand a greenfield site, nor does it reject other concepts. Bell explicitly positions CUBE as a synthesis. “I’ve stolen things that I like,” he says, pointing to the inverted triangle CSS approach, Atomic Design thinking, and BEM naming conventions that still flavor his code. Utility-driven Tailwind projects are also natural fits.

One particular habit has fans and critics both talking: placing class names in square brackets. It’s a grouping mechanism that lets Bell separate block classes, utility classes, and design-token classes into visual groups. It’s become a talking point too, with Bell saying he’s considered registering whatswiththebrackets.com just to answer the question once and for all. For complex projects, he says, “it requires that sort of grouping because there is so much going on.” But, like exceptions, it’s optional — just visible organization.

Where CUBE Fits In The CSS Landscape

Learning CUBE tends to be easier for developers coming from BEM, given familiar aesthetics. “Most of the nuts and bolts are very BEM-like blocks and elements,” Bell notes, with the main changes being the utilities-first styling and the use of exceptions over modifiers. Bell also emphasizes acknowledging CSS’s flexibility rather than fighting it. His advice is to learn how CSS works, which he suggests sidesteps the deep problems that some methodologies seek to fix.

Bell gives credit to the CSS Working Group for moving the platform forward, and he’s optimistic about CSS’s long-term trajectory. “CSS is brilliant,” Bell says, “I love it — and the fact that the browser is happy to handle what you don’t want to hard-code is a strength."

Going Loud With CUBE

What started as somewhat informal course material has turned into something much bigger. “I published it as supporting material,” Bell explains. “Then it just blew up.” His plans now are to turn it into formalized modules and more guided learning. He remains humble about its limits, though: “It won’t work for everyone…We’re all people — we have different tastes. It’s about communicating with your teammates at the end of the day.”

If you’re interested in diving deeper, check out Bell’s Piccalilli and the original CUBE article. (il, mrn)