浏览器开发者工具的Computed和Styles面板是最高效CSS工具：Computed可定位真实生效样式及覆盖原因，Styles修改需注意!important和不可动态属性。
CSS 本身没有“运行时工具”，所谓“常用工具”实际是围绕 CSS 编写、调试、优化和集成的辅助手段——真正提升前端开发效率的，不是多装几个插件，而是选对场景用对东西。
浏览器开发者工具里的 Computed 和 Styles 面板怎么用才不踩坑
这是最常被忽略却最高效的 CSS 工具。别只盯着 Styles 面板改值看效果，Computed 面板才能暴露真实生效的样式来源。
-
Computed里点击属性名右侧的链接，能直接跳转到对应 CSS 规则（含行号），快速定位覆盖逻辑 - 勾选
Show all后，注意带删除线的属性——说明被更高优先级规则覆盖，不是“没写上”，而是“被干掉了” - 修改
Styles中的值时，若发现改了没反应，先看该属性是否被!important锁死，或是否属于不支持动态修改的属性（如display: contents的子元素布局）
PostCSS 是什么，哪些插件值得加进构建流程
PostCSS 不是预处理器，而是一个 CSS 处理平台。它本身不提供语法糖，靠插件干活。上线项目里真正高频实用的就这几个：
-
postcss-preset-env：按目标浏览器自动补全gap、aspect-ratio、:has()等新特性，比手写-webkit-前缀靠谱得多 -
cssnano：压缩阶段启用，但注意默认会移除/* stylelint-disable */注释，若依赖注释控制 lint 规则，得配safe: true -
postcss-import：允许用@import拆分 CSS 文件，但别在.vue或.tsx单文件组件里混用，容易触发重复导入或作用域错乱
为什么现在很少提 Less/Sass，但团队项目还在用 @mixin 和 @function
不是预处理器过时了，而是使用方式变了。纯 CSS 变量 + clamp() + color-mix() 能覆盖很多旧需求，但复杂逻辑仍需抽象。
