Exception

The last part of CUBE CSS is exceptions. An exception is a deviation from the rules outlined in a block.

Usually, an exception is related to a state change. For example: you might have a “reversed” state or an “inactive” state.

Let’s use a card as an example. By default a card looks like this:

A standard edition card element with the image at the top.

We add the exception using a data attribute like this:

<article class="card" data-state="reversed"></article>

This provides a useful hook for both CSS and JavaScript. You can apply the exception in CSS like so:

.card[data-state='reversed'] {
  display: flex;
  flex-direction: column-reverse;
}

The result ends up looking like this:

A nicely flipped card.

Why data attributes?

We use data attributes because an exception should only occur in exceptional circumstances (the clue is in the name). Because the exception is often caused by outside influence, such as JavaScript, a mechanism that both CSS and JavaScript can use efficiently makes sense, too. It’s also useful to consider exceptions in the context of a finite state machine (opens new window) too.

The goal of most of the CUBE CSS methodology is clarity and separating exceptions into data attributes achieves exactly that.

What should an exception do?

1. Provide a concise variation to a block
2. Use data attributes

What shouldn’t an exception do?

1. Variate a block to the point where it isn’t recognisable anymore. This is where a new block should be created
2. Use CSS classes