CUBE CSS

From BEM to ITCSS to Tailwind I’ve seen varying methods of organizing CSS, but this is a pretty interesting read that takes some ideas from them all. I like Andy’s approach of giving some backstory about how he arrived at this and how it’s not necessarily a one-size-fits-all.

I’ve been all the way down the micro-optimisation rabbit hole and been down the “let’s build a library of skeletal components for all projects” (this almost never brings any benefit). On the opposite end of the scale, I’ve done all globals with direct HTML tag styling, too. Any method is extremely valid for your context and if this is how you write your CSS, keep doing what works for you and your team.

Andy Bell

I really like the idea of embracing the cascade instead of fighting it. I think that goes hand-in-hand with leaning into using plain HTML elements as much as possible first before going through all the trouble and added complexity of custom classes and markup. It makes think of something like Gutenberg like a visual HTML editor, excluding dynamic blocks.

I love the .flow utility class idea. I’ve done that a little but but usually would only use it in big areas like the main page content sections. It allows for so much more extensibility while helping keep spacing more uniform, especially for creating new components that contain others with out having to recreate a ton of styling.

That relates to the philosophy of should a component provide its own margin or should that be automatically applied based on where it lives? Right now I’m inclined to say it should automatically be set based on its context. Maybe it could have a default:

.c-fact {
	margin: 0.5rem;
}

.u-flow > :first-of-type {
	margin-top: 0;
}

.u-flow > :not(:first-of-type) {
	margin-top: 1rem;
}

.u-flow > :last-of-type {
	margin-bottom: 0;
}Code language: CSS (css)