Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY.
Objects are simple independent and indivisible components that are used across the project. We can think of them as interface elements like headings, form fields, buttons and content blocks.
Here is a simplest example of a button object:
.button {
display: inline-block;
padding: 5px 15px;
color: #333;
border: 1px solid #ccc;
border-radius: 3px;
background: linear-gradient(#ffffff, #e6e6e6);
}
Everything looks simple so far but apparently this is not the only type of buttons you’ll need during the project. You may need buttons of different size, colors and behaviour and here is where you have several options.
Subclassing
Let’s think about .button as about parent class in programming languages, we’ll be extending with child classes. It’s useful for inheriting the properties of parent object while adding additional behavior. Let’s say we want to create two more simple types of buttons – button with icon before text and dropdown button.
.iconed-button:before {
content: "\24BE\ ";
}
.dropdown-button:after {
content: " \25BE";
}
Now we are able to create both child elements by applying parent and child class to button element.
or
Not to create a mess in HTML and reduce number of classes applied to the element one more optimization is required. We can list our child classes with coma right after parent class in selector, so that all these classes will have common styles and two of them will differ in a minor way.
.button, .iconed-button, .dropdown-button {
display: inline-block;
padding: 5px 15px;
color: #333;
border: 1px solid #ccc;
border-radius: 3px;
background: linear-gradient(#ffffff, #e6e6e6);
}
.iconed-button:before {
content: "\24BE\ ";
}
.dropdown-button:after {
content: " \25BE";
}
In this case you can use only one of .button, .iconed-button, .dropdown-button classes in your HTML applying it to the button element.
Result
Modifiers
Modifier classes are used to make minor modifications to the existing behavior or to indicate that the object is in a certain state. Nouns are used for object’s class names, in case of classes modifiers it is apparent to use adjectives.
Modifiers are meant to modify which means to override some properties of ‘default’ objects whereas subclassing is used to extend them with new properties, thus creating new objects.
.button.primary {
background: #006dcc;
color: #fff;
}
.button.disabled {
background: #aaa;
color: #eee;
}
This is how by applying a .primary or .disabled modifier to the button object we can now change the coloring of button. In this case, we also wanted to force these modifiers to apply to the button object only so we used .button class in selector.
Parental namespacing
One more way to change object’s appearance or behaviour is to use parent’s class name in selector to add changes to the object. Location dependent styles are usually the kind of things you should avoid, because in general object’s styles should not depend on placement. But in rare cases you may come up with an idea of modifying object due to it’s location. For example let’s make the submit button larger than the default one.
.signup-form .button {
padding: 8px 20px;
}
In this case the button will remain an independent object you can place anywhere on the page, and only if placed inside signup form it will change its appearance.
Conclusion
Despite the fact that CSS, unlike programming languages, is declarative, there’s a lot to pick from object oriented programming. Thinking “objects” is the kind of skill that will help you create re-usable objects and stop writing redundant code. It becomes easy to maintain code base and make modifications to existing UI without harming different parts of application.