clamp()可替代媒体查询实现响应式字号，需统一单位（全rem或全vw），safari 13.1+支持并需回退；:is()简化多层级选择器，仅接受选择器列表；contain: layout style paint隔离重绘区域；css自定义属性+calc()管理间距系统。
用 clamp() 替代媒体查询写响应式字号
字号随视口缩放是高频重复劳动，写一堆 @media 不仅冗长，还容易漏断点。clamp() 一条声明就能覆盖最小值、首选值、最大值，浏览器原生计算，无 JS 开销。
常见错误是把单位混用，比如 clamp(1rem, 2.5vw, 1.5rem) —— 这里 2.5vw 和两边的 rem 单位不兼容，会导致降级为第一个值。必须统一为相对单位（rem、em）或视口单位（vw），但不能交叉。
-
clamp(1.125rem, 4vw, 1.5rem)是安全的：全部用vw或全部用rem才能生效 - 实际场景中，优先用
rem基准（如clamp(1rem, 1.2rem, 1.5rem)），再配合根字体大小动态调整，更可控 - 注意 Safari 13.1+ 才支持，旧版本会直接忽略整条声明，需加回退（如先写
font-size: 1.25rem）
用 :is() 简化多层级选择器重复书写
写卡片、表单、列表时，经常要给不同容器下的同类元素设相同样式，比如 .card h2、.modal h2、.sidebar h2，过去只能复制粘贴或用预处理器嵌套。:is() 让你一次写全，语义清晰，体积更小。
典型坑是误以为 :is() 支持任意复杂选择器组合——它只接受“选择器列表”，不能嵌套伪类或属性选择器内部。例如 :is(.a:hover, .b:focus) 合法，但 :is(.a .b, .c .d) .text 中的空格层级会被整体当作一个选择器，可能意外命中。
- 正确写法：
:is(.card, .modal, .sidebar) h2 { line-height: 1.2; } - 别在
:is()里写:not()或[data-]等带括号的结构，部分浏览器解析不稳定 - 兼容性上，Chrome 100+/Firefox 100+/Safari 15.4+ 支持；不支持时整条规则被忽略，建议保留一份传统写法作降级
用 contain: layout style paint 隔离重绘区域
页面滚动或动画时，某个模块频繁重排重绘（比如实时搜索结果列表），拖慢整个页面。手动加 contain 能让浏览器明确知道：“这个区域的变化不会影响外面”，从而跳过不必要的样式计算和布局遍历。
最容易踩的坑是滥用 contain: strict —— 它会切断所有外部影响，包括 z-index 层叠上下文、position: fixed 定位参考、甚至 overflow 裁剪边界。日常加速只需 contain: layout style paint，已足够隔离大部分干扰。
- 适用场景：商品网格、评论流、可折叠面板内容区等有明确边界的独立模块
- 不要加在
body或全局容器上，会导致样式继承断裂 - 调试时用 Chrome DevTools 的 “Layers” 面板看是否生成了独立合成层，确认生效
用 CSS 自定义属性 + calc() 管理间距系统
外边距、内边距、间隙（gap）反复写 0.5rem、1rem、1.5rem，改起来像扫雷。抽成自定义属性后，所有间距变成变量调用，改一个值，全站响应。
关键不是“能不能用”，而是怎么组织才不易混乱。很多人把所有尺寸都塞进 :root，结果后期查 --space-lg 到底等于多少得翻三页代码。应该按使用场景分组，并用 calc() 衍生关联值。
- 基础定义：
:root { --space-unit: 0.5rem; --space-xs: calc(var(--space-unit) * 1); --space-sm: calc(var(--space-unit) * 2); } - 组件内复用：
.button { margin: var(--space-sm) var(--space-md); }，避免硬编码 - 注意：Sass/Less 的变量无法在运行时更新，而 CSS 自定义属性可以被 JS 修改，这点在主题切换时特别有用
CSS 加速布局的核心不在炫技，而在识别哪些样式真正需要动态响应——clamp() 对字号、:is() 对选择器、contain 对渲染边界、自定义属性对数值体系，每处都对应一个具体瓶颈。漏掉任一环，自动化就卡在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
