CSS変数（カスタムプロパティ）を使って効率的にコーディングする方法

<div class="box1">
  <p>box1の子要素です。</p>
</div>

:root {
  --mainColor: red;
}

.box1 p {
  color: var(--mainColor);
}

<div class="box1">
  <p>box1の子要素です。</p>
</div>

/* --mainColorが未定義なため、「blue」が適用される */
.box1 p {
  color: var(--mainColor, blue);
}

<div class="box1">
  <p>box1の子要素です。</p>
</div>

/* --colo1が未定義のため、--color2が適用される */
:root {
  --color2: blue;
}

.box1 p {
  color: var(--color1, var(--color2));
}

<div class="box1">
  <p>box1の子要素です。</p>
</div>

<div class="box2">
  <p>box2の子要素です。</p>
</div>

:root {
  --mainColor: blue;
}

/* 再宣言によって変数の値を上書き */
.box2 {
  --mainColor: red;
}

.box1 p{
  color: var(--mainColor);
}

.box2 p{
  color: var(--mainColor);
}

<div class="box1">
  <p>box1の子要素です。</p>
</div>

:root {
  --font-size: 20px;
}

/* 画面幅が768px未満のとき */
@media (max-width: 768px) {
  :root {
    --font-size: 16px;
  }
}

body {
  font-size: var(--font-size);
}

<header class="header"></header>

<div class="content">
  <h1>ここがコンテンツエリアです。</h1>
  <p>上部にヘッダー高さ分のマージンが設定されます。</p>
</div>

<script>
  // ヘッダーの高さを取得しCSS変数にセットする関数
  function setHeaderHeight() {
    const header = document.querySelector(".header");
    const headerHeight = header.offsetHeight;
    // HTMLのルート要素にCSS変数を設定
    document.documentElement.style.setProperty(
      "--header-height",
      `${headerHeight}px`
    );
  }

  // ページロード時とウィンドウリサイズ時に関数を実行
  window.addEventListener("load", setHeaderHeight);
  window.addEventListener("resize", setHeaderHeight);
</script>

:root {
  --header-height: 0px; /* 初期値 */
}

.header {
  background-color: #3498db;
  height: 40px;
  padding: 10px 0;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;

  @media (max-width: 768px) {
    padding: 0;
  }
}

.content {
  margin-top: var(--header-height); /* ヘッダーの高さに応じたマージン */
  background-color: #fff7c6;
  text-align: center;
}