Base Class
Default values for body copy, focus states etc do not have a natural parent block. Applying them to .base provides a baseline block for these elements and modifiers
<body class="base">
[…]
</body>
You can see this echoed in the design tokens.
Stand Alone Classes
Certain classes require state based modifiers, creating these as standalone classes has two benefits
- Reusability
- Simpler to hook into Javascript events
<!-- DO THIS - Stand Alone -->
<div class="co-card is-active">
[…]
</div>
<!-- or BEM modifier -->
<div class="co-card co-card--is-active">
[…]
</div>
Standalone Classes
Some example standard classes:
- is-active
- has-loaded
- is-loading
- is-visible
- is-disabled
- is-expanded
- is-collapsed
This can be appended to class as
.co-accordion__panel {
display:none;
}
.co-accordion__panel.is-visible {
display:block;
}
For illustration purposes only