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;
}
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
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.