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.
- Composition. These are classes which define the foundational layout, the content skeleton if you will. I imagine this being your grid and flexbox classes.
- Utility. Largely these are just utility classes (
.wrapper, .inline,.centreetc.). 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. - 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.
- 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.
