Scalable Modular Architecture for CSS, or SMACSS.
Helps structure code for projects on any scale, similar to OOCSS.
Combine repeating CSS patterns into 5 reusable components:

1. Base Rules

All default styles for element selectors (i.e. not classes or IDs). A style reset stylesheet is a good example of base rules.

2. Layout Rules

Main containers, sections, rows, columns, sidebar, grid, etc.

3. Module Rules

Reusable miner class module components (i.e. avoid IDs and element selectors)
Using subclasses instead of the usual descendant selectors.

Example

.mod {
  padding: 10px;
  width: 90%;
  background: #ccc;
}
  .mod-footer {
    width: 50%;
  }

.search-box {
  padding: 10px;
  width: 200px;
}
  .search-box-sidebar {
    width: 80%;
  }

<div class="search-box search-box-sidebar">
  ...
</div>

4. State Rules

Styles that override the module and layout styles to determine how they’ll look when in a particular state (e.g. collapsed/expanded, success/error, :hover/:active/:focus, etc.)

Example

.mod:hover {
  background: rgba(100,149,237,0.3);
}
.is-transparent {
  opacity: 0;
}
.js-is-collapsed {
  background: #4169E1;
}

5. Theme Rules

Optional rules that define color scheme and typography and describe how the layout and modules might look.