进阶工程化

这一课你将能做到

1. 用 BEM 命名法写出可维护的类名
2. 用 CSS 变量做主题切换
3. 用 @media 写响应式断点和移动端适配
4. 了解浏览器前缀和 PostCSS 在工程中的角色

为什么要学

写到项目第 20 个页面时，你会发现 style="color: red" 和 .red-text 这种命名完全失控。CSS 没有命名空间，全局污染是工程化最大的敌人。BEM、CSS 变量、@media 是现代前端工程的基础装备。

人话：BEM 是类名的「姓名 + 姓 + 身份证号」——.card__title--large 告诉你这是卡片组件（card）里面的标题（title），而且是变体大号（large），看到名字就知道是干嘛的。

先建立图像

<style>
    :root {
        --color-primary: #0366d6;
        --color-bg: #fff;
        --color-text: #333;
        --space-sm: 8px;
        --space-md: 16px;
        --radius: 8px;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --color-bg: #1a1a2e;
            --color-text: #e0e0e0;
        }
    }

    body {
        background: var(--color-bg);
        color: var(--color-text);
        transition: background 0.3s, color 0.3s;
    }

    .btn {
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius);
        background: var(--color-primary);
        color: #fff;
        border: none;
        cursor: pointer;
    }
    .btn--outline {
        background: transparent;
        color: var(--color-primary);
        border: 1px solid var(--color-primary);
    }
    .btn--large {
        padding: var(--space-md) 24px;
        font-size: 1.125rem;
    }

    @media (max-width: 768px) {
        .btn { padding: 8px 12px; font-size: 0.875rem; }
    }
</style>

<button class="btn">主按钮</button>
<button class="btn btn--outline">描边按钮</button>
<button class="btn btn--large">大按钮</button>

跟着做

步骤 1：BEM 命名规范

BEM = Block（块）+ Element（元素）+ Modifier（修饰符）

Block     .card       ← 一个独立组件
Element   .card__title ← 组件内部元素
Modifier  .card--dark  ← 组件变体
Modifier  .card__title--large ← 元素变体

.card { ... }                  /* 块 */
.card__title { ... }           /* 元素 */
.card--dark { ... }            /* 块变体 */
.card--dark .card__title { ... } /* 变体下的元素 */
.card__btn--large { ... }      /* 元素变体 */

好处：

• 类名全局唯一，不会互相覆盖
• 看到名字就知道结构和用途
• 组件可复用、可预测

步骤 2：CSS 变量（自定义属性）

:root {
    --color-primary: #0366d6;
    --color-danger: #e74c3c;
    --space-unit: 8px;
    --font-base: 16px;
}

.btn-primary { background: var(--color-primary); }
.btn-danger  { background: var(--color-danger); }
.card        { padding: calc(var(--space-unit) * 2); }