Overriding base styles

.xyz is a base class .abc is a modifier of .xyz that changes some colours .

by samando27

HTML

<div class="xyz">
  This is a default XYZ
</div>
<div class="xyz abc">
  This is an ABC variation of XYZ
</div>

CSS

.xyz{
  width: 200px;
  height: 50px;
  background-color: red;
  border: 1px solid black
}

.xyz.abc {
  background-color: blue;
  color: white;
}