Quick start

C3 is a component based approach to writing CSS. The idea is that every element in your page is either a Component, or a Child. The third ‘C’ describes the Context that a component is in.

Component

A stand-alone part of a page. Represented by a class. The class is named after what the component is, never what it looks like, or its state. Class names are formed of lowercase words, separated by a hyphen (-). Components can be nested within one another (in the markup, not in CSS).

Example

<!-- valid component class -->
<nav class="main-menu"></nav>

<!-- invalid, we don't describe appearance here -->
<nav class="horizontal-menu"></nav>

.main-menu {
  /* styles */
}

Child

A Child could be thought of as a Component Child. A Child is a constituent part of a Component, not intended to be used separately from it. Just like components, children are represented by a class, named after their purpose, and never their appearance or state. Class names are formed of the parent Component name, an underscore, and Child name. If there are multiple words in the Child section of the selector name, they are separated following the same convention as components (lowercase words, separated by a hyphen). Children can also be nested within one another (in the markup, not in CSS).

Example

<ul class="main-menu"> <!-- Component -->
  <li class="main-menu_item"> <!-- Child -->
    <a class="main-menu_link"></a> <!-- Child -->
  </li>
</ul>

.main-menu_item {
  /* styles */
}

.main-menu_link {
  /* styles */
}

Context

Context describes the context of a Component or Child. Context here means circumstances, not appearance. These circumstances are typically:

• State: A transient property of a component. It is “active”, for example.
• Metadata: Similar to state, but could be persistent. For example, how many items are in a list.
• Parent: A component that is a parent (at any level) of the component in question. So, if this component is in a sidebar, for example.
• Media: The screen size, orientation etc of the device.

When possible, state, and metadata should be handled with attribute selectors.

Example

<ul class="main-menu" data-count="2"> <!-- Metadata -->
  <li class="main-menu_item">
    <a class="main-menu_link" aria-current="page"></a> <!-- State -->
  </li>
  <li class="main-menu_item">
    <a class="main-menu_link"></a>
  </li>
</ul>

.main-menu_link {
  /* styles */

  &[aria-current="page"] {
    /* styles */
  }
}

If for some reason, you need to use a class for state or metadata, it should be constructed using an attribute, two hyphens, and a value. For example active--true or transition--enter.