技术博客
常见现象是：本地开发一切正常，上线后按钮没颜色、布局错乱、display: none 意外生效。这不是 bug，而是 CSSNano 默认启用了 aggressive 的转换规则，比如把 background-color: transparent 简化成 background-color: 0（部分老浏览器不认），或合并看似重复的 @media 查询却误删了带 JS 动态 class 的关键选择器。
JIT 模式不是“实时生成 CSS 文件”，而是按需解析源码中的 class 字符串，只生成实际用到的工具类规则。它跳过了传统扫描全项目 HTML/JSX 的步骤，改用 AST 分析（如 PostCSS 插件 + 正则 fallback）提取 class 名字，再动态构造对应 CSS 声明。
别指望 Ctrl+Shift+P 搜“convert color”能直接调出原生命令——Sublime Text 本身不带颜色值解析和互转逻辑。所有所谓“一键转换”，都依赖第三方插件，且多数只支持基础场景：比如把 #fff 展开成 #ffffff，或把 rgb(255, 0, 0) 转成 #ff0000，但对 hsl(0, 100%, 50%) 或带 alpha 的 rgba() 支持很弱。
因为浏览器对 :is() 内部的选择器只做一次解析和匹配，而不是把每个逗号分隔项展开成独立规则去重复计算。这直接降低了样式表的解析开销和重排重绘时的匹配成本。
不装 CLI 工具、不运行 npm init -y 或 npx tailwindcss init，tailwind.config.js 就不会凭空出现。很多新手卡在“为什么 class 不生效”，实际是压根没这个配置文件。
根本原因是 grid 容器的 overflow 或 place-items 干扰了子菜单的定位上下文。子菜单（.submenu）通常用 position: absolute，但它会相对于最近的「定位上下文」祖先计算位置——而 display: grid 本身不创建新定位上下文，除非该网格容器设置了 position: relative。
很多人以为 var(–color-primary) 和 JS 里的 let 一样能随时重赋值，其实它只是个“占位符”——真正起作用的是它背后绑定的 :root 或其他选择器里声明的 –color-primary: #007bff。换肤本质是切换这些自定义属性的值，不是改 var() 本身。
Webpack 5 把 CSS 压缩从内置逻辑里移出去了，哪怕你用了 MiniCssExtractPlugin 提取样式，最终生成的 .css 文件还是明文——这点很多人上线后才发现文件大得离谱。
因为 Sublime Text 原生只做基础语法高亮和简单标签补全，css 语言包默认不加载属性值列表（比如 display: flex 中的 flex），也不识别自定义变量或 CSS-in-JS 场景。它把“补全”这件事交给了插件层，不是靠内置逻辑硬编码的。
多数 CSS reset（如 normalize.css 或经典 Eric Meyer Reset）会重置 margin 和 padding 为 0，但**不会修改 box-sizing 的默认行为**。这意味着所有元素依然使用 content-box，即宽度/高度仅包含内容区，不包含内边距和边框。