Object-Oriented CSS

Learn about implementing object-oriented CSS in our Rails application.

OOCSS and its component-based styling approach

Object-oriented CSS (OOCSS) is not strictly defined, and it’s a confusing name if we come from object-oriented programming. In OOCSS, there are no classes, objects, or methods like there are in Ruby. The object being referred to in the name is what we’ve been calling a component or might be called a module.

Achieving a particular design requires markup plus CSS. A button with rounded corners and a large font in all caps is an object/component/module. We are going to use the word component, since that’s what we’ve been using thus far.

In OOCSS, markup is assigned a name pertaining to what visual component it is supposed to be. OOCSS methodologies employ naming conventions to attach classes to any part of the component’s markup ...