Object Oriented CSS (OOCSS).
The “object” here is a repeating visual pattern you see. Visual pattern are then abstracted into indepenedant CSS “modules” that can be reused anywhere in your site.
Reversibly, in other words, creating CSS rules as if a CSS rule is a class, and an HTML element’s appearance is an object of that class.

You do that by:

1. Separating structure from appearance:

Abstract repeating visual patterns into separate “skins” that are reusable, and give them logical predictable names and use them in the HTML code as needed.

Before

After

Similar to the grouping concept mentioned earlier but giving the group of selectors a reusable class name instead.

2. Separating containers from content

This means styles should not be location-independent. All elements with the given classes will look the same no matter what or where.

Before

.header-inner,
.main-content,
.footer-inner {
  position: relative;
  margin: 0 auto;
  padding: 15px;
  width: 90%
}
.header-inner {
  height: 150px;
}

After

.global-width {
  position: relative;
  margin: 0 auto;
  padding: 15px;
  width: 90%
}
.header-inner {
  height: 150px;
}

This is where OOCSS surpasses grouping.

OOCSS Benefits

• Smaller style sheets
• Easier to maintain
• Predictable CSS
• Creating new pages will require little to now CSS coding