title: Is there a null or undefined or "falsy" value for css custom properties?
body: <p>I want to create a component and expose certain properties that could be overridden by parent elements.</p>
  
  <p>Here's an example. Let's say I'm creating a button which has its own colors, but allows to change its background color if there's a <code>--button-bg-color</code> defined:</p>
  
  
  
  <pre><code>.my-button {
    --bg-color: blue;
  
    /* lots of other css... */
  
    /**
      * here I assume that there might be a --button-bg-color defined,
      * but I have a fallback to my own --bg-color variable
      */
    background-color: var(--button-bg-color, var(--bg-color));
  }
  </code></pre>
  
  <p>The problem with the code above is that the <code>--button-bg-color</code> variable is referenced somewhere deep down the styling.</p>
  
  <p>What I wish I could do is the declare somewhere up top that I might want to use this variable. This would tell me that this component expects to be overridden.</p>
  
  <p>Maybe something like this?</p>
  
  
  
  <pre><code>.my-button {
    --button-bg-color: undefined; /* is there something like undefined? */
    --bg-color: blue;
  
    /* the rest of the code is the same */
  }
  </code></pre>