-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Enduring CSS
By :
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>
Historically, changing a class in the DOM, especially near the root of the DOM has been discouraged. Doing so invalidates the render tree meaning...
Change the font size
Change margin width
Change background colour