Using the unset keyword to mimic composition

The unset keyword resets a property to its inherited value, or its initial value if it does not inherit. In this case, a composition of properties (.composite) can serve as the parent, and the addition of classes can selectively remove each of these properties.

by David Partyka

HTML

<div class="composite">I have all composite styles</div>
<div class="composite no-color">I have all except color</div>
<div class="composite no-margin-left">I have all except margin-left</div>
<div class="composite no-background-color">I have all except background-color</div>
<div class="composite no-color no-margin-left no-background-color">I have nothing</div>

CSS

div {
  height: 90px;
  width: 90px;
  margin-bottom: 5px;
  border: 1px solid black
}

.composite {
  color: red;
  margin-left: 50px;
  background-color: green
}

.composite.no-color {
  color: unset
}

.composite.no-margin-left {
  margin-left: unset
}

.composite.no-background-color {
  background-color: unset
}