How ECSS used to handle state change

Back in Chapter 3, Implementing Received Wisdom, I related how much I liked the SMACSS approach of communicating state. For example:

.has-MiniCartActive {}

Indicates that on, or somewhere below this node, the mini cart is active.

Another example:

.is-ShowingValue {}

This would communicate that the Component or one within it is showing some value (that was previously hidden).

Historically, that was how I communicated state when applying ECSS. I used a micro-namespaced class, in addition to any existing classes on the node to communicate this state. For example:

     
        .is-Suspended {} 
        .is-Live {} 
        .is-Selected {} 
        .is-Busy {}

A node using these classes in the DOM might look like this:

<button class="co-Button is-Selected">Old Skool Button</button>

Note

Historically, changing a class in the DOM, especially near the root of the DOM has been discouraged. Doing so invalidates the render tree meaning...