Cube CSS | Andy Bell

I think there's some real merit to Andy's ideas behind Cube CSS. It's a middle-ground between everything-in-JS or BEM that throw out the cascade entirely and the free-for-all that can happen if you don't have any structure at all. That makes it flexible and scalable. It also feels a lot more like a pace layer approach.

Sure, in the old days of Internet Explorer, the cascade was a bit tricky, but using old knowledge and techniques as the base of a modern approach is like feeding horse feed to a car.
  1. Composition. These are classes which define the foundational layout, the content skeleton if you will. I imagine this being your grid and flexbox classes.
  2. Utility. Largely these are just utility classes (.wrapper, .inline, .centre etc.). They do "one thing, and do it well". Makes sense. Not sure I'm a fan of the use of colours as utility glasses; I'd rather use variables for that. In fact, personally I feel like CSS variables are a form of utility class, so would group those two together.
  3. Block. Pretty much how it is in BEM, a block == a component. Ideally you have very little of these; how you specifically deal with sub-rules is up to you.
  4. Exception. Exceptions make use of data-attributes. I like that a lot. They let you manipulate blocks, reversing card order (for example) or highlighting a specific card, and they don't leave you fighting the cascade too much.

I didn't know you could use square brackets within the class attribute, which is suggested for ordering classes into "primary block", "blocks", and "utility" segments:

class="[ card ] [ section box ] [ bg-case color-primary ]"

Pipes are also acceptable and useful.

I feel like CUBE CSS neatly fits into a model I've been thinking about a lot recently. I've found my approach to using big stylesheets in React more frustrating over time, whilst I really like lumping component-specific styles into, well, the component. I prefer CSS modules, but CSS-in-JS achieves the same thing. The problem is, if that's all you do you end up with repetition and inconsistency. With Growable, we used a combination of CSS modules and a global.css stylesheet which struck a good balance but still felt like it could be better optimised. I think CUBE CSS maybe hits on a method to achieve that optimisation. I'd be intrigued to give it a go.

Explore Other Notes

Older

Spinosaurus 2020

There's been a lot of chatter about Spinosaurus recently, thanks to the new revelations about its tail morphology, but I think Mark has put together the best overall argument for what the […]
  • I think there's some real merit to Andy's ideas behind Cube CSS. It's a middle-ground between everything-in-JS or BEM that throw out the cascade entirely and the free-for-all that can happen if you […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.