2025 年最值得關注的十個 CSS 更新——到底是 “Fuck” 還是 “Suck”
2025 是 CSS “長大”的一年：做了心理建設，開始理直氣壯地說——“這活兒不用 JavaScript，我自己能搞定。”
但不是每個閃閃發光的新特性都值得上車。有的顛覆體驗，有的則有點過度工程。 下面逐個拆：用法、坑點、兼容性，最后給出我的“Fuck / Suck”判決。
1. Container Queries
過去我們都按屏幕寬度適配。布局簡單還行；組件化之后就崩：卡片套格子、格子套側欄、側欄再塞進彈窗…… 你真正想要的是：組件響應它的容器，而不是整個窗口。
現在可以了。
.card-wrap {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 280px) {
.card { padding: 24px; font-size: 1rem; }
}
@container card (max-width: 279px) {
.card { padding: 12px; font-size: .9rem; }
}給父級起名（container-name），用 @container 按容器尺寸寫樣式。 不需要 JS Hack，不需要 ResizeObserver。組件真正可復用，丟到哪里都能自適應。
Verdict：Fuck.不是花活，是剛需。
極客時間周年慶有個給用戶的福利抽獎，人人都可以參與，100%中獎，完全 0 套路，趕緊白票。
2. :has()
CSS 終于有了條件感知。 以前你不能根據子元素去選中父元素，只能上 JS：“如果這張卡里有圖片就加個 class”。
現在 CSS 自己會判斷：
form:has(input:invalid) {
border: 2px solid red;
}
.post:has(img) {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}把 :has() 當成全民呼喚多年的父選擇器。它是響應式的關系選擇。 但也危險：復雜選擇器會炸性能（比如 div:has(.card:has(img[src$=".gif"])) 這類組合），瀏覽器很努力，但別虐它。
Verdict：Fuck.用得好是神，用過頭會卡成 PPT。
3. CSS Nesting（原生嵌套）
用過 Sass/Less 的人都“假裝”寫了多年，現在原生支持：
.header {
padding: 1rem;
& h1 {
margin: 0;
font-size: 1.5rem;
}
& nav {
display: flex;
gap: 1rem;
& a {
text-decoration: none;
color: inherit;
}
}
}少寫重復選擇器，沒了構建依賴。 但別五層嵌套，那是自殺式可維護性。保持淺層結構。
Verdict：Fuck.這就該是 CSS 的本來面目。
4. Anchor Positioning API（錨定定位）
終于有了原生的工具提示/下拉/氣泡的“跟隨定位”。 以前全是 JS 去綁位置、監聽滾動、計算邊界。
<button class="btn">Click me</button>
<div class="tooltip">Tooltip text here</div>.btn {
anchor-name: --btn;
}
.tooltip {
position: absolute;
position-anchor: --btn;
bottom: anchor(top);
left: anchor(center);
transform: translateX(-50%);
position-try-fallbacks: flip-block;
background: #222; color: #fff;
padding: 6px 12px; border-radius: 4px;
}- 按鈕成為錨點。
- tooltip 相對錨點定位。
- 沒空間會自動翻轉。 零 JS，無 getBoundingClientRect()，無 scroll 監聽。
兼容性目前Chromium 領先，其他在路上。等全覆蓋，你會忘了那些定位庫。
Verdict：Fuck（但目前主要在 Chrome 系里）。被低估的頂級新 API。
5. Scroll-Linked Animations（滾動聯動動畫）
你見過“滾動即動畫”的頁面，大多是超負荷 JS + 超耐心調試。 現在 CSS 內建：
@scroll-timeline --page-tl {
source: auto;
orientation: block;
}
header .logo {
animation: fade 1s linear both;
animation-timeline: --page-tl;
animation-range: 0 20%;
}
@keyframes fade {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-20px); }
}動畫直接綁定滾動進度，更流暢、更易讀，不再依賴龐大 JS 庫。
Verdict：Fuck.簡單、順滑、優雅。
6. if()（條件函數）
CSS 終于能做小決策。 像邏輯，但沒完全變編程語言（要不要算，評論區吵去 ??）。
.button {
padding: if(style(--compact: true): 6px 10px; else: 12px 18px);
background: if(prefers-color-scheme: dark: #222; else: #fff);
}可以檢查自定義屬性、系統偏好等，內聯決策。
Verdict：Mixed.偶爾妙用，濫用會混亂。
7. @scope
小招解決大痛點。 全局 CSS 是混沌：一個 footer 里的 .card img 就能炸整個站。
@scope 把樣式限定在局部：
@scope (.card) {
img { border-radius: 8px; }
h3 { margin-bottom: .5rem; }
}像平民版 Shadow DOM，沒有復雜性。 終于可以局部組件化，不必把類名寫成 card__image__inner 那種“歐洲中世紀姓氏”。
Verdict：Fuck.組件樣式回到可控軌道（React 用戶會想起 *.module.css 的舒適感）。
極客時間周年慶有個給用戶的福利抽獎，人人都可以參與，100%中獎，完全 0 套路，趕緊白票。
8. Cascade Layers（級聯層）
花半小時找“為什么樣式沒生效”？多半是級聯“心情不好”。層讓優先級可設計：
@layer reset, base, components, utilities;
@layer base {
button { border-radius: 6px; }
}
@layer components {
.btn { padding: .6rem 1rem; }
}
@layer utilities {
.btn { text-transform: uppercase; }
}你知道誰贏、為什么贏。把級聯從敵人變工具。
Verdict：Fuck.不是酷炫，但救心智。
9. 現代色彩函數
設計師終于有講理的顏色了。
:root {
--brand: oklch(60% 0.16 210);
}
.button {
background: color-mix(in oklch, var(--brand) 80%, white 20%);
color: color-contrast(var(--brand) vs white, black);
}在 CSS 里直接混色、對比、偏移。 OKLCH/LAB 更符合人眼感知，漸變更順滑、跨設備更穩定。 它不僅更好看，更可預測。
Verdict：Fuck.低調但專業感爆棚。
10. Subgrid
修了布局史上最“智障”的坑。 父網格 + 子網格=永遠對不齊。subgrid 直接繼承父網格軌道：
.pricing {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.card {
display: grid;
grid-template-rows: subgrid;
}子網格繼承父級的軌道尺寸，嵌套完美對齊。 不花哨，但無可替代。
Verdict：Fuck.布局體系的無聲英雄。
Personal Take（主觀總結）
2025 的 CSS 讓人心安： 不再追著 JS 吃灰，結構、邏輯、清晰度都有了，同時保留了簡潔。
但權力即代價：越強的 CSS 越容易寫出技術驚艷、維護地獄的代碼。請聰明地用：用新特性簡化代碼，而不是炫技。未來的你會感謝現在的你。
因為頭一回，CSS 不只是“給頁面上色”——它在“構建”頁面。
