h1 Immutable CSS custom properties
p While we push for the power of dynamic CSS to the browser via <code>--css-custom-properties</code>, let's visit how we can instill good code practice with immutability in custom properties.
p Remember, Custom properties are inherited, so changing a value of a constant can cause unwanted side effects in the children.
  p.middle This element is trying to change the <code>--COLOR</code> property value to 'red' 
    a.inner(href='#') and this should be in green, even if the --COLOR property has been tried to be mutated to red. However, this 
    a.red tag can mutate the '--COLOR' property using `!important`
  h2 Example with background color
  .outer OUTER
    .middle MIDDLE
      .inner.red INNER (is mutating a constant using !important)
        .inner This is why we use !important in our constants.
View Compiled
/* Notice the selector below.
':root, .development *'

We're passing down the value down to the child items. The only way to override these properties is by using another !important. I.e. the values in here are immutable!

i.e. During development, add a 'development' class to the root HTML element. Do not add this during production.

The underlying rule is, if something is in --CAPS-CASE, don't override it.

If you need dynamic properties, create --lower-case properties and add it to the ':root'

:root, .development * {
  /* Declare all constants here */
  --COLOR: mediumseagreen !important;

.outer, .middle, .inner {
  --COLOR: red; /* Will not work. Because !important keyword is used. */

.middle {
  --COLOR: blue; /* Won't work. Because !important keyword is used. */

a {
  color: var(--COLOR);

a.inner {
  --COLOR: red;

.red {
    It's easy to call someone out for the following line.
    A constant is being mutated using the !important keyword. */
  --COLOR: red !important;

.background-color-example div {
  background-color: var(--COLOR);
  border: .1rem dashed whitesmoke;
  padding: 1rem 1rem 1rem 2rem;

code {
  background: whitesmoke;
  border: 1px solid lightgray;
  padding: .1rem .2rem;
  border-radius: .2rem;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.