HTML内联样式需用引号包裹、声明间用分号分隔，避免引号嵌套错误；CSS压缩可能误删单位或分号，导致样式失效，应通过还原对比定位问题，优先用class切换实现响应式。
HTML 中 style 属性写法必须符合语法规范
直接在标签里用 style 属性写内联样式，最常见错误是引号嵌套混乱或分号遗漏。比如：
缺少结尾引号或最后的分号虽非强制，但压缩工具常依赖它做语句切分，漏写容易导致后续样式被吞掉。
内联
正确写法必须满足：外层用双引号（或单引号），内部不能出现未转义的同类型引号；每条声明后建议加分号；冒号前后不加空格不影响解析，但压缩器更适应紧凑格式。
-
style="margin:0;padding:0;"✅ 安全，无空格、有分号 -
style='color:"red";'❌ 单引号内又用双引号且未转义，解析失败 -
style="width:100% height:20px"❌ 缺少分号，第二条声明被忽略
CSS 压缩后样式失效，先查是否删了关键分号或单位
很多 CSS 压缩工具（如 cssnano、clean-css）默认会移除末尾分号、合并重复声明、甚至省略 0px 中的单位——但某些老版浏览器或特定属性（如 animation、grid-template-areas）对格式敏感。
典型问题包括：margin:0 被压成 margin:0 没问题，但 flex:0 0 50% 若被误压为 flex:0 0 50（丢 %），就彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具 Elements 面板看渲染后的
style值，对比压缩前原始 CSS，确认数值和单位是否完整 - 检查压缩配置里是否启用了
discardUnused或mergeLonghand，它们可能误删看似冗余实则影响布局的声明 - 临时关闭压缩，把原始 CSS 粘到
标签中验证——如果正常，基本锁定是压缩逻辑的问题
内联 style 和外部 CSS 压缩行为不一致
HTML 的 style 属性只接受“声明列表”，不支持选择器、媒体查询、@规则。而 CSS 文件压缩时可能处理 @media 嵌套、变量、自定义属性等——这些一旦被错误提取进 style 属性就会直接报错或静默失效。
