CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working in—often the browser—rather than against it.
This project is very much a work in progress so this documentation will continue to evolve.
What does CUBE CSS stand for? permalink
CUBE stands for Composition Utility Block Exception. CSS stands for Cascading Style Sheets. The CSS part comes straight from the language: CSS.
The name of this methodology gives the game away straight away; it’s an extension of CSS rather than a reinvention of CSS. The CUBE part extends what we already get for free with CSS to give us a little bit of control, where we need it.
This differs somewhat to other popular methodologies like BEM, which are very good in their own right, but also run against the grain of CSS.
How does CUBE CSS compare to other methodologies? permalink
If you were to compare methodologies: it would be safe to say that CUBE CSS takes most of its inspiration from BEM. A good way to think of it is a step back from BEM’s principles.
This is because the core of BEM is blocks, whereas with CUBE CSS, the core is CSS. The cascade and inheritance are embraced, not avoided, so by the time you get down to blocks in CUBE, they become much more insignificant.
Does CUBE CSS scale? permalink
Just like CSS: CUBE CSS scales perfectly well and has been used to power massive websites, tiny blogs, mobile apps and even intranet software. This methodology has roots in both huge projects that service millions of people all the way down to small websites and starter kits, thanks to its flexibility. This flexibility has also enabled CUBE CSS to work in both very old and very new codebases.
A high-level overview permalink
It’s recommended that you read “CUBE CSS” on this blog. It’s an introductory post which gives a high-level overview of what CUBE CSS and how it works with some simplified examples.
Next up: Principles