light-dark() 函数和 color-scheme 属性能不能替换项目里现有的暗色模式实现,这篇给出具体判断标准:暗色变量数量、是否依赖 data-theme 做第三方组件适配,以及原生表单控件、滚动条怎么借 color-scheme 自动换色。
记录给后台表格行加一个操作菜单时,把原本要手写的 z-index、点击外部关闭、Esc、焦点管理和定位计算,逐步换成 popover 属性、dialog 元素和 CSS 锚点定位的过程,附选型判断和可运行代码。
同文档 View Transitions 之外,跨文档(MPA)过渡终于可用。记录我给一个传统多页站点加上页面切换动画的过程、view-transition-name 的配对和降级处理。
原生嵌套和 @scope 落地后,我在项目里逐步去掉一部分 Sass 的过程:嵌套的坑、@scope 的下边界 donut scope、以及现在还不能完全替代预处理器的地方。
从 v3 升到 v4 的真实迁移过程:Oxide 引擎带来的速度变化、配置从 JS 搬到 CSS、@theme 和 CSS 变量怎么用,以及几个升级时踩的坑。
手写 scroll 监听算进度容易卡顿,也难维护;CSS view() 能把这类动画交还给浏览器,但兼容降级和动效克制要做到位。
Shadow DOM 里重复插入 style 的维护成本有多高,Constructable Stylesheets 适合什么场景,它和普通 CSS 该怎么分工,这篇讲清楚。
Tooltip、Dropdown、Popover 的定位维护成本一直很高,这篇讲清楚 CSS Anchor Positioning 能省掉哪部分测量代码,以及真实项目里为什么不会立刻全量替换。
媒体查询看的是屏幕宽度,但组件真正关心的是自己被放进了多宽的容器——CSS Container Queries 的写法、containment 带来的副作用、适用场景,以及和媒体查询的分工。
同一个主色在项目里同时以 `#1677ff`、`rgb(22, 119, 255)`、`var(--blue-6)` 三种形式存在,谁也说不清哪个是标准——Design Token 怎么分层、怎么落地才能让颜色和间距不再散落在业务代码里。
CSS 原生滚动时间线 scroll()/view() 上个月刚随 Chrome 115 落地,只有 Chrome 支持、还带实验性质。生产上怎么继续用 JS + IntersectionObserver 稳住,怎么在内部项目里小心尝鲜原生方案,是这篇要说清的。
什么布局该用 Grid、什么该用 Flex,判断依据不是喜好,而是这块结构里有没有需要同时对齐的行和列。轨道、minmax、区域命名、min-width:0 这些细节决定 Grid 好不好用。
flex item 被内容撑出容器、z-index 加到六位数仍被遮住、overflow: hidden 一开就连累 sticky,这些布局问题背后都是浏览器的布局与层叠规则,本文按盒模型、收缩、层叠上下文一路拆到底。
CSS Custom Highlight API 让文本高亮不必再往 DOM 里插 mark 标签:怎么用 Range 注册高亮、多节点匹配的复杂度、::highlight() 的样式边界,以及 Safari 尚未支持时的降级取舍。
主题切换不是给 body 加个 class 就完事,CSS 变量、组件库主题和设计 token 分层决定后面好不好维护。
全局样式、命名、变量、第三方覆盖到 @layer,讨论中型前端项目里样式优先级怎么从失控收回来。
工具类方案要不要用,关键看它能不能收住样式复用、响应式、设计约束和团队协作成本这几件事,这篇把 Tailwind 的取舍标准和几个容易踩的坑理清楚。