CUBE CSS

CUBE CSS is a CSS methodology created by Andy Bell that stands for Composition, Utility, Block, Exception. It’s a methodology that helps you write maintainable CSS by working with the grain of CSS rather than against it.

To learn more about CUBE CSS’s philosophy and principles, we highly recommend you go direct to the source: Andy Bell’s article or the official CUBE CSS documentation.

CUBE CSS provides a simple but powerful way to structure your CSS. When you add CUBE CSS to your project, you get:

1. A well-organized directory structure:

   styles/
   ├── global/
   ├── components/
   └── utilities/

2. A methodology that leverages the power of CSS and the web platform

3. Consistent patterns for composition and layout

CUBE CSS works beautifully with design tokens. If you’re using a starter kit, you’ll notice a cube.json in your tokens directory. This file contains tokens that map to CUBE’s CSS variables:

{
  "flow-space": {
    "$type": "dimension",
    "$value": "{space.sm}",
    "$description": "Vertical spacing in flow composition"
  }
}

These tokens ensure consistency across your project by consuming your spacing primitives.

If you’re not using a starter kit, you can:

• Use CUBE’s default values
• Add your own CSS variables
• Create your own cube.json design tokens file

Here’s a quick example of how CUBE CSS works:

<article class="[ card ] [ flow ] [ bg-primary color-base ]" data-state="reversed">
  <img src="..." alt="" />
  <div class="card__content">
    <h2>Card Title</h2>
    <p>Card content that will automatically flow with consistent spacing.</p>
  </div>
</article>

In this example:

• [ card ] is a block - your component
• [ flow ] is a composition class that handles vertical rhythm
• [ bg-primary color-base ] are utility classes
• data-state="reversed" is an exception

The beauty of CUBE CSS is that it provides just enough structure to keep your CSS maintainable, without forcing you into a rigid framework. It works with your existing CSS knowledge and helps you write better, more consistent styles.

CUBE CSS is part of a broader philosophy of writing better, more maintainable CSS. Here are some excellent resources that align with this approach:

Andy Bell’s Complete CSS course is a comprehensive guide to modern CSS development. While not specifically about CUBE CSS, it teaches the same principles of working with the grain of CSS. The course includes real-world projects and practical examples that demonstrate these concepts in action.

Every Layout by Andy Bell and Heydon Pickering is a book about algorithmic layout design. It teaches you how to create flexible, resilient layouts that work across different screen sizes and contexts. The layouts in Every Layout follow the same principles as CUBE CSS - they’re composable, reusable, and work with the browser’s natural layout algorithms rather than fighting against them.