Well, I think how CSS would naturally work is just skip the variables and do
/* Set the design foundation */
body {
border-width: 2px;
background-color: #3498db;
margin: 1rem;
}
/* Override at the component level when you need to */
.d-topic-list,
.d-sidebar {
border-width: 1px;
}
Maybe I’m just old.
The real problem is this
Example: simply targeting .btn or button:
.btn {
border: 1px solid red;
}
misses the post buttons but does target the “views” link and hamburger menu.
