我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我
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: 6px12px; 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: 020%;
}
@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 的舒适感）。
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 不只是“给页面上色”——它在“构建”页面。
全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。
最后：
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
