CSS @layer 実践ガイド ―
詳細度の地獄から解放される、新しいCSS設計

/* ① レイヤーの優先順位を最初に宣言（後ほど詳述）*/
@layer base, components, utilities;

/* ② 各レイヤーにスタイルを書く */
@layer base {
  a { color: blue; }
}

@layer components {
  .btn { color: white; background: #059669; }
}

@layer utilities {
  .text-red { color: red; } /* 最も優先される */
}

/* 優先順位の宣言：右に行くほど強い */
@layer vendor, base, components, overrides;

/* 外部ライブラリを vendor レイヤーに閉じ込める */
@layer vendor {
  @import url('some-ui-library.css');
}

/* 自分のスタイルはこれより上のレイヤーへ */
@layer components {
  .btn {
    background: #059669; /* ライブラリのbtnより必ず優先される */
    border-radius: 8px;
  }
}

@layer base, components;

@layer components {
  .alert { color: white; }
}

/* @layer の外 → すべてのレイヤーに勝つ */
.alert.urgent { color: red; }

/* ライブラリのスタイル（詳細度が高い） */
.ui-lib .btn.primary { background: blue; }

/* 自分のスタイル（詳細度が低くて負ける） */
.btn { background: green; } /* 効かない */

/* やむなく !important を乱発 */
.btn { background: green !important; }

@layer vendor, components;

@layer vendor {
  .ui-lib .btn.primary { background: blue; }
}

@layer components {
  /* 詳細度が低くても、レイヤーが上なので勝つ */
  .btn { background: green; }
}

/* 優先順位を最初に宣言 */
@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    --color-primary: #059669;
    --radius-md: 8px;
  }
}

@layer base {
  /* リセット・デフォルトスタイル */
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; }
}

@layer components {
  .btn {
    background: var(--color-primary);
    border-radius: var(--radius-md);
    padding: 8px 20px;
    color: white;
  }
}

@layer utilities {
  /* 最優先の調整クラス */
  .mt-0 { margin-top: 0; }
  .hidden { display: none; }
}