Block（块）：独立的 UI 组件，如 .card、.button、.nav
Element（元素）：块的组成部分，用 __ 连接，如 .card__title、.card__image
Modifier（修饰符）：状态或变体，用 -- 连接，如 .button--primary、.card--featured

<!-- ❌ 通用类名，极易冲突，无法看出组件归属 -->
<div class="card">
  <div class="title">标题</div>
  <div class="content active">内容</div>
  <button class="btn blue large">操作</button>
</div>

<!-- ✅ BEM：类名自带上下文，一眼看出结构关系 -->
<div class="card card--featured">
  <div class="card__title">标题</div>
  <div class="card__content card__content--expanded">内容</div>
  <button class="button button--primary button--large">操作</button>
</div>

// ❌ 层级嵌套模拟作用域，选择器权重高，难以覆盖
.card {
  .title { font-size: 18px; }
  .content { color: #333; }
  &.active { background: blue; }
}

// ✅ BEM：扁平结构，权重统一（全是单类选择器）
.card { ... }
.card__title { font-size: 18px; }
.card__content { color: #333; }
.card--featured { background: blue; }

import styled from 'styled-components'

const Button = styled.button<{ variant: 'primary' | 'danger' }>`
  padding: 8px 16px;
  border-radius: 4px;
  background: ${props => props.variant === 'primary' ? '#1890ff' : '#ff4d4f'};
  color: white;

  &:hover {
    opacity: 0.85;
  }
`

// 使用
<Button variant="primary">确认</Button>
<Button variant="danger">删除</Button>

<!-- ❌ 需要命名、需要写 CSS 文件 -->
<div class="user-card">
  <img class="user-avatar" />
  <div class="user-info">...</div>
</div>

<!-- ✅ Tailwind：直接在 HTML 里组合，无需命名 -->
<div class="flex items-center gap-3 p-4 rounded-lg shadow-sm bg-white">
  <img class="w-10 h-10 rounded-full" />
  <div class="flex flex-col gap-1">...</div>
</div>

/* ❌ 魔法数字散落各处，改色要全局搜索替换 */
.button { background: #1890ff; }
.link { color: #1890ff; }
.tag { border-color: #1890ff; }

/* ✅ 定义变量，一处修改处处生效 */
:root {
  --color-primary: #1890ff;
}
.button { background: var(--color-primary); }
.link { color: var(--color-primary); }
.tag { border-color: var(--color-primary); }

/* 第一层：原始色板（不直接使用） */
:root {
  --blue-50: #e6f4ff;
  --blue-500: #1890ff;
  --blue-600: #0958d9;
  --red-500: #ff4d4f;
  --gray-100: #f5f5f5;
  --gray-900: #1f1f1f;
}

/* 第二层：语义 token（表达用途，不表达颜色） */
:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-danger: var(--red-500);
  --color-bg-base: #ffffff;
  --color-text-base: var(--gray-900);
  --color-text-secondary: #666;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* 第三层：组件 token（只在组件内部使用） */
.button {
  --button-bg: var(--color-primary);
  --button-padding: var(--spacing-sm) var(--spacing-md);
  --button-radius: var(--radius-sm);

  background: var(--button-bg);
  padding: var(--button-padding);
  border-radius: var(--button-radius);
}

/* 亮色主题（默认） */
:root {
  --color-bg-base: #ffffff;
  --color-text-base: #1f1f1f;
  --color-border: #e8e8e8;
}

/* 暗色主题：只需要覆盖语义 token */
[data-theme='dark'] {
  --color-bg-base: #141414;
  --color-text-base: #ffffffd9;
  --color-border: #424242;
}

// 切换主题
function toggleTheme() {
  const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
  document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark')
}

/* 先写移动端，再用 min-width 扩展 */
.container {
  padding: 16px;        /* 手机 */
}

@media (min-width: 768px) {
  .container {
    padding: 24px;      /* 平板 */
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 32px;      /* 桌面 */
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* 声明容器 */
.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

/* 根据容器宽度，而非视口宽度调整布局 */
@container card-grid (min-width: 600px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container card-grid (min-width: 900px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}