Partially override shorthand

by kmouse

HTML

<div class="div"">
  <p>Text</p>
</div>

<div class="div bold">
  <p>Text</p>
</div>

<div>
  <p class="div bold">Text</p>
</div>

<div class="div bold-before">
  <p>Text</p>
</div>

<div class="div bold">
  <p>Text</p>
</div>

CSS

body {
  --value: normal 20px;
}
.bold-before {
  font-weight: bold;
}
.div {
  font: italic var(--value) sans-serif;
}
.bold {
  font-weight: bold;
}