Block

A block is a skeletal component or organisational structure. To compare it to common user interface elements: it is a card element or a button element.

A block is skeletal because by the time you get to the block-level in CUBE CSS, most of the work has already been done by the global CSS, composition and utility layers.

This means that a block’s role is less like BEM, where everything is styled inside a block, but instead, it is a mechanism of running against the grain of the global CSS, composition and utility layers. This creates a light, but specific group of rules that only apply in that context.

No formal element syntax permalink

In BEM, an element contains a double underscore, like this: .my-block__my-element. In CUBE CSS, this doesn’t have to apply, if you don’t want it to.

This is because again, by the time you get to the block-level in CUBE CSS, most of the work has already been done by the global CSS, composition and utility layers, so formal element declaration is mostly redundant.

Inside a block, you can do whatever you want because you have the safety net of the parent block class (.my-block) which adds one extra specificity point for you.

With all of this in mind, you could have selectors that look like this:

.my-block {
}

.my-block .image {
}

.my-block .content {
}

You could even target HTML elements:

.my-block {
}

.my-block img {
}

.my-block article {
}

The important thing is consistency. How you achieve that consistency is up to you and your team.

Composition within blocks permalink

It is advised that you approach the internals of your block with a composition layer. Let’s use a card as an example.

Inside this card’s content area, we have a heading and some content. Using a flow utility, we create a block-level composition layer, which means that any content should be supported in this element.

This all ties-back to hinting the browser with flexible rules, rather than micro-managing it. This mantra is why CUBE CSS helps to create really scalable front-ends.

What should a block do? permalink

1. Extend the work already done by the global CSS, composition and utility layers
2. Apply a collection of design tokens within a concise group
3. Create a namespace or specificity boost to control a specific context

What shouldn’t a block do? permalink

1. Grow to anything larger than a handful of CSS rules (max 80-100 lines)
2. Solve more than one contextual problem. For example: styling a card and a button in one file

Next up: Exception