Object-Oriented CSS
Explore the principles of Object-Oriented CSS and its component-based approach to styling in Rails. Understand how methodologies like BEM and SMACSS help create reusable, maintainable CSS by organizing styles into clear components, reducing complexity and improving code sustainability.
We'll cover the following...
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 ...