title: CSS custom property priority
body: <p>I'm learning CSS.</p>
  <p>I'm trying to have a header style change when I scroll and figuring out the best way to do it.</p>
  <p>Just a few questions</p>
  <ol>
  <li>Are ladder defined CSS properties the final properties that are rendered on the DOM?</li>
  <li>If 1 is true, do custom CSS properties override previously declared CSS properties?</li>
  </ol>
  <p><a href="https://codepen.io/dplumbonline/pen/MWmyvYG" rel="nofollow noreferrer">My code</a></p>
  <p>Summary;</p>
  <p>I've defined a header element.</p>
  <pre><code>header {--justify-content: center; justify-content: var(--justify-content);}
  </code></pre>
  <p>On scroll, I'll use .js to add this class in order to modify the properties.</p>
  <pre><code>.header-scrolled {--justify-content: &quot;space-between&quot;;}
  </code></pre>
  <p>Is this valid code?</p>
  <p>Thank you.</p>