Object-oriented CSS is a set of principles for creating reusable components.

Two principles in Object-oriented CSS :

  1. Separate container and content.
  2. Separate structure and skin.

Ex: say we have 2 buttons

<body>
  <div class="content"><button class="btn btn-primary">Sign in</button></div>
  <aside class="aside"><button class="btn btn-secondary">Quit</button></aside>
</body>

Following Object-oriented CSS, we should style the button like this:

/* Separate container and content. */
.btn {
  width: 150px;
  border: 0;
  border-radius: 50px;
  padding: 1rem 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Separate structure and skin. */
.btn-primary {
  background-color: gold;
}

.btn-secondary {
  background-color: dodgerblue;
}