Oxygen

What is Oxygen?

Oxygen is a simplified approach to CSS that makes it easy to write modular styles. It also allows teams to share and communicate about code using the traditional language of object-oriented programming.

Objects

Objects are the building blocks of our modular system. A “button”, “header”, or “navigation” are all examples of objects. Objects are almost always nouns in our code.

Child-objects

Child-objects are named in a way that implies they should only be used inside a parent object. A “menu-item” should only be used inside a “menu” object. A “navigation-link” should only appear inside a “navigation” object.

Subclasses

Subclasses are variations of on an object definition. They imply the “type” of object and inherit the properties of the superclass object. A “primary-button” inherits the properties of the “button” object, but may include additional changes such as the background color or font-weight.

Modifiers

Modifiers are used to apply small changes to an object. A “no-border” modifier could be used to turn borders off on an object. Modifiers can also be used to indicate the state of the object, like “is-selected” or “is-open”.

An annotated example

Defining an object

An object definition begins in our CSS with a simple class selector. In Oxygen, we avoid sophisticated selectors in favor of simple class selectors because it makes it easier to understand CSS specificity at a glance and gives us concrete names with which to reference our interface.

Using modifiers to indicate state

Here we have examples of two modifiers. The first utilizes a pseudo class to define the hover state for the button. The second defines the selected state. For the class name of the second we’ve used a prefix (“is-”) to make it easy to identify as a state modifier in the HTML.

Declaring a child-object

Here we’ve created a new definition for a child-object. In this case, a caret icon (down arrow) to indicate that this button has an associated menu. We include the name of the parent object in the class name so that it is clear that this should only appear inside of a button.

Subclassing an object

We’ve also created two subclasses to customize the color and “type” of button. Subclasses are used when another object should inherit most of the properties of another object with a few modifications.

// Object

.button {
  border: none;
  border-radius: 5px;
  background: $gray;
  box-shadow: rgba($black, 0.15) 0 -4px 0 0 inset;
  color: $white;
  font: 100 18px/1.5 sans-serif;
  padding: 8px 25px 10px;
  cursor: pointer;
  outline: none;


  // Modifiers

  &:active {
    box-shadow:
      rgba($black, 0.3) 0 -200px 0 0 inset;
  }

  &.is-selected {
    background: $blue;
  }
}


// Child-object

.button-caret {
  border: 7px solid transparent;
  border-top-color: $white;
  border-bottom: none;
  display: inline-block;
  position: relative;
  top: -2px;
  right: -8px;
}


// Subclasses

.primary-button {
  background: $green;
}

.danger-button {
  background: $red;
}

/* Object */

.button {
  border: none;
  border-radius: 5px;
  background: gray;
  box-shadow: rgba(0, 0, 0, 0.15) 0 -4px 0 0 inset;
  color: white;
  font: 100 18px/1.5 sans-serif;
  padding: 8px 25px 10px;
  cursor: pointer;
  outline: none;
}


/* Modifiers */

.button:active {
  box-shadow: rgba(0, 0, 0, 0.3) 0 -200px 0 0 inset;
}
.button.is-selected {
  background: blue;
}


/* Child object */

.button-caret {
  border: 7px solid transparent;
  border-top-color: white;
  border-bottom: none;
  display: inline-block;
  position: relative;
  top: -2px;
  right: -8px;
}


/* Subclasses */

.primary-button {
  background: green;
}
.danger-button {
  background: red;
}

Using an object

Notice how the button object is created by adding a single class to an element. Styling with just classes decouples the style from the underlying markup. The “button” class can just as easily be used with a link as with a button element.

Applying a modifier

Here our “button” class is doing double duty. With an “is-selected” modifier, it can show state for a row of filters. In this case, “Apples” is selected.

Using a child-object

Here we’ve created a dropdown button by adding a caret (a small triangle) to a button. Oxygen encourages you to compose objects from several smaller objects where possible. This pattern promotes reuse and extensibility.

Extending with a subclass

We must combine the “button” class with the appropriate subclass (“primary-button” or “danger-button”) achieve object inheritance. In this case, primary buttons are used to designate the default action on a form and danger buttons are used when a button has potentially harmful consequences.

<!-- Object -->

<button class="button">Button</button>
<a class="button" href="#">Link</a>

<br><br>




<!-- Modifier -->

<button class="button is-selected">Apples</button>
<button class="button">Oranges</button>
<button class="button">Bannanas</button>

<br></br>




<!-- Child-object -->

<button class="button">
  Dropdown
  <i class="button-caret"></i>
</button>

<br><br>




<!-- Subclasses -->

<button class="button primary-button">Okay</button>
<button class="button">Cancel</button>

<br><br>

<button class="button danger-button">Delete</button>

Naming conventions

Oxygen uses parts of speech to identify different types of classes. Nouns are used for objects and adjectives (or descriptive phrases) are used for subclasses and modifiers.

Object	.button .menu	.noun
Child-object	.button-caret .menu-item	.noun-noun
Subclass	.primary-button .popup-menu	.adjective-noun
Modifier	.is-selected .scrollable	.prefix-adjective or .adjective

About the author

John W. Long

With 15 years of experience building websites and applications for the modern web, I am a designer and developer with a passion for pixels and code. I am the creator of Radiant CMS and Serve as well as dozens of smaller projects on GitHub. I also write about Sass and CSS as the Managing Editor of The Sass Way.

In this book I am adapting my knowledge of object-oriented programming to CSS. Boiling the concepts down into an easy to understand system for structuring stylesheets.