<div class="my-component"><h2>Normal component</h2></div>
<div class="my-component special"><h2>Special component!</h2></div>
<div class="my-component highlight"><h2>Highlight component</h2></div>
* {
	box-sizing: border-box;
}

body {
	display: flex;
}

.my-component {
	background-color: var(--bgColor, var(--highlight, hsl(20, 50%, 60%)));
	width: 50%;
	height: 100vh;
	padding: 40px;
}

.my-component.special {
	--bgColor: hsl(20, 100%, 30%);
}

.my-component.highlight {
  --highlight: hsl(50, 100%, 60%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.