CSS Style Guide

Learn about Skyline's approach to writing scalable, easy to read CSS

• BEMIT
  • Prefix
  • Block
  • Element
  • Modifier

BEMIT

Skyline CSS classes are structured following the BEMIT naming convention (opens new window) (B: Block, E: Element, M: Modifier, IT: Inverted Triangle).

BEMIT provides the best of Block-Element-Modifier naming (opens new window). It makes CSS easier to read. And the Inverted Triangle (opens new window) structure allows CSS code to be more organized and scalable.

Dig deeper into BEMIT as a naming convention

Dig deeper into BEMIT as a naming convention

Learn more

Every class name that uses BEMIT has four parts:

Prefix

Prefixes help keep our code and cascade organized. They make sure we're thinking about the purpose and constraints for different types of code.

Skyline's prefixes:

• c-: Used for component that handles multiple pieces of functionality.
• u-: Used for utility classes that apply only one style. Usually with !important to control specificity over other styles that might be applying the same property.
• o-: Used for objects that control layout. For example our vertical rhythm Stack.

Block

As the joke goes, "There are three things that are hard in programming: naming things and off by one errors." This is often the hardest part of the entire process! But when done well, a great block name describes the component in a meaningful way.

Questions to ask yourself:

• Does it describe the component's purpose, not its aesthetic, in a way that's unlikely to change over time? For example, c-icon-2 has less chance of needing refactoring or creating confusion than something like c-giving-account-icon.
• Is it unique in that it doesn't conflict with other classes in the code?
• Would it be meaningful for both designers and developers, so we are all speaking the same language?

The block is attached to the outer element (e.g. <div class="train">), and it's repeated in other styling of elements (e.g. <span class="train__icon>) or modifier classes (e.g. <div class="train--inverse">). This makes it easier to connect a piece of styling that is being applied to the code that's controlling it.

<div class="c-train">
  <svg
    class="c-train__icon c-icon c-icon--size-1600"
    aria-hidden="true"
    focusable="false"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
  >
    <path
      fill="currentColor"
      d="M448 96v256c0 51.815-61.624 96-130.022 96l62.98 49.721C386.905 502.417 383.562 512 376 512H72c-7.578 0-10.892-9.594-4.957-14.279L130.022 448C61.82 448 0 403.954 0 352V96C0 42.981 64 0 128 0h192c65 0 128 42.981 128 96zm-48 136V120c0-13.255-10.745-24-24-24H72c-13.255 0-24 10.745-24 24v112c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24zm-176 64c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56z"
    ></path>
  </svg>
</div>

Element

Components will often have child (opens new window) elements that need styling or layout properties.

Repeat the block part of the code (e.g. train) and add a double underscore and a more descriptive element name (e.g. .train__icon).

An example of a more descriptive name could be something literal like __heading or __icon. Or it could describe the behavior that happens when that class is applied, such as __pull-right.

<div class="c-train">
  <svg
    class="c-train__icon c-icon c-icon--size-1600"
    aria-hidden="true"
    focusable="false"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
  >
    <path
      fill="currentColor"
      d="M448 96v256c0 51.815-61.624 96-130.022 96l62.98 49.721C386.905 502.417 383.562 512 376 512H72c-7.578 0-10.892-9.594-4.957-14.279L130.022 448C61.82 448 0 403.954 0 352V96C0 42.981 64 0 128 0h192c65 0 128 42.981 128 96zm-48 136V120c0-13.255-10.745-24-24-24H72c-13.255 0-24 10.745-24 24v112c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24zm-176 64c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56z"
    ></path>
  </svg>
</div>

Modifier

Modifiers describe a variation of a component. Repeat the block part of the code (e.g. train) and add a double dash and a more descriptive element name (e.g. .train--inverse).

<div class="c-train c-train--inverse">
  <svg
    class="c-train__icon c-icon c-icon--size-1600"
    aria-hidden="true"
    focusable="false"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512"
  >
    <path
      fill="currentColor"
      d="M448 96v256c0 51.815-61.624 96-130.022 96l62.98 49.721C386.905 502.417 383.562 512 376 512H72c-7.578 0-10.892-9.594-4.957-14.279L130.022 448C61.82 448 0 403.954 0 352V96C0 42.981 64 0 128 0h192c65 0 128 42.981 128 96zm-48 136V120c0-13.255-10.745-24-24-24H72c-13.255 0-24 10.745-24 24v112c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24zm-176 64c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56z"
    ></path>
  </svg>
</div>