2026 年的 CSS 已经脱胎换骨

过去几年 CSS 标准化的速度大幅提升，2026 年的 CSS 已经强大到让很多预处理器的功能变得多余。

CSS Nesting（嵌套）

2025 年底所有主流浏览器已全面支持 CSS 嵌套，Sass/Less 的最大卖点消失了：

.card {
    background: white;
    border-radius: 8px;

    /* 直接嵌套，无需 & 前缀 */
    .title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .body {
        color: #666;
        line-height: 1.6;

        /* 深层嵌套 */
        a {
            color: #3b82f6;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

@layer — 控制级联

层叠（Cascade）一直是 CSS 的痛点，@layer 让你显式控制样式优先级：

/* 定义层的顺序 — 越后面的优先级越高 */
@layer reset, base, components, utilities;

/* 第三方样式归入 reset 层 */
@layer reset {
    @import "normalize.css";
}

@layer components {
    .btn { padding: 8px 16px; border-radius: 4px; }
}

@layer utilities {
    .mt-4 { margin-top: 1rem; }
}

has() 选择器 — CSS 终于有了父选择器

/* 包含 .error 子元素的表单加红色边框 */
form:has(.error) {
    border-color: #ef4444;
}

/* 当卡片中有图片时使用不同布局 */
.card:has(img) {
    grid-template-columns: 200px 1fr;
}

/* 已勾选的复选框旁边的标签加粗 */
input:checked + label {
    font-weight: 700;
}

/* 没有任何子项的列表隐藏 */
ul:empty {
    display: none;
}

容器查询 + 样式查询

.container {
    container-type: inline-size;
    container-name: sidebar;
}

/* 当容器宽度 > 400px 时 */
@container sidebar (min-width: 400px) {
    .card { flex-direction: row; }
}

/* 当容器宽度 < 300px 时 */
@container (max-width: 300px) {
    .card { font-size: 0.875rem; }
}

颜色空间：OKLCH 和 Display P3

2026 年的显示器广泛支持广色域，CSS 也跟上了：

.element {
    /* sRGB 色域 — 传统 */
    color: #3b82f6;

    /* OKLCH — 更广色域，更直观 */
    color: oklch(56% 0.2 250deg);

    /* Display P3 — 苹果设备广色域 */
    color: color(display-p3 0.2 0.5 0.9);
}

这些新特性让 CSS 变得前所未有的强大，Sass/Less 的很多功能已经被原生 CSS 取代，值得每个前端开发者重新审视自己的样式方案。