Key concepts

Isolation

One of the key objectives of C3 is to make your CSS scalable. This essentially means that as your codebase grows, people can continue to make changes without fear of breaking something. There are generally two approaches to achieving this: isolation, and abstraction. The C3 methodology takes the isolation approach. This means, one element (Component or Child) is isolated from the styles of other elements. There is no “leaking” of styles. This methodology aims to offer predictability, by virtue of this isolation, no matter how large your codebase gets.

Single source of truth

A core aim of C3 is to avoid any ambiguity about where the styles for a given element can be found. To achieve this you are aiming for each element of an interface having one class assigned to it. This class should be either a Component or a Child. All of the styles for which will be found in the code block for that element. There will be exceptions, the below covers how to handle those.

No classes

There will be times when you have elements that do not have a classes attached to them, for example a generated paragraph tag. This is fine. If you need to style such an element, those styles should live in a global elements.css file. Any contextual overrides should live in this file too.

p {
  /* global paragraph styles */

  @nest .my-component & {
    /* context can be applied to global elements */
  }
}

Multiple classes

There is no “mixing” of components in C3, so multiple classes are limited to specific circumstances. C3 suggests that you use something other than a class for anything other than a Component or Child selector. An attribute selector, for example. If you need to use a class however, it should be distinguishable from the Component or Child. If you are using a class for Context, using the Context syntax of attribute--value achieves this. This concept should apply to any other additional classes that are applied to an element. So if an additional class is required for a Javascript hook, it should be identified as such. For example, js-my-selector.

Semantic

“Semantic” in C3 refers avoiding any descriptions of appearance in selector names. C3 selector names follow this W3C guideline:

[…] authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

This offers the freedom to restyle elements for infinite contexts, while maintaining easy to understand HTML.

Semantic example

<button class="shopping-cart_remove-button">
  Remove item from shopping cart
</button>

Non-semantic example

<button class="background-red hover-background-dark-red text-white font-size-6 font-bold paddingY-2 paddingX-4">
  Remove item from shopping cart
</button>