CSS修改后页面未变，首要排查内联style属性覆盖：其优先级为1000，高于所有外部样式（含!important以外规则）；DevTools中被划掉且标注“inline”的即为此类干扰，需全局搜索style=定位并清理。
为什么修改CSS文件后页面没变？先查style属性是否覆盖了你
浏览器对style属性的优先级是1000，比任何外部类名、ID选择器甚至!important以外的规则都高。你改了.card { margin: 16px; }，但页面上某个<div class="card" style="margin: 8px;">依然显示8px——不是CSS没生效，是style直接把它压死了。
DevTools里看Styles面板，如果某条规则被划掉但旁边标着“inline”，那就是它在作祟。全局搜索style=能快速定位这类硬编码样式，尤其要注意模板渲染后动态插入的HTML片段（比如Vue的v-html或React的dangerouslySetInnerHTML）。
- 别信“就一处，改完删掉”，上线后没人记得它还在那儿
- SSR生成的静态页里
style容易被当成“已优化”，其实只是把维护成本转嫁给了HTML文件 - 用ESLint插件
eslint-plugin-html加规则no-inline-styles，CI阶段拦截
JS操作style时，elem.style.left和getComputedStyle(elem).left根本不是一回事
elem.style.xxx只能读写内联声明过的属性值，而且只认驼峰命名（backgroundColor✅，background-color❌）。更关键的是：它不反映真实渲染结果——外部CSS设了margin: 20px，elem.style.margin返回空字符串；父元素用了transform导致子元素位移，elem.style.top也完全不知道。
要读真实值，必须用getComputedStyle(elem).margin；要批量设值，用Object.assign(elem.style, { opacity: '0.5', transform: 'scale(0.9)' })，比逐行赋值少触发几次重排。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 动画中频繁改
top/left会强制同步布局，改用transform: translateY()+will-change: transform - 不要在循环里反复读
elem.style.color来判断状态，它可能根本没设过 - 服务端传来的颜色值（如
data-bg="#ff6b6b"），应由JS解析后统一挂到class或CSS变量上，而非拼style="background-color: #ff6b6b;"
哪些场景真绕不开style？必须加约束条件才允许写
不是“能不能”，而是“有没有被验证过的不可替代性”。以下三类可破例，但每条都要配套管控：
-
服务端动态尺寸：仅限SVG属性（
cx/cy/r）或Canvas容器宽高，且值必须经Number()校验为有效数字，禁止带单位字符串 -
JS实时定位：仅限
transform、opacity、zIndex等不触发重排的属性；禁用top/left/width等会引发布局计算的字段 -
邮件模板：Outlook等客户端确实只认
style，但必须用工具（如juice）自动内联，并禁止在模板里写@media或伪类——它们本来就不支持
所有破例都要走Code Review卡点：提交记录里得注明“为何不能用class+CSS变量替代”，否则直接驳回。
style写在<meta>或<script>上完全无效，别白费劲
style是全局属性，但只对参与渲染的元素生效。给<meta name="viewport">加style="display:none"，浏览器直接忽略；给<link rel="stylesheet">加style="color:red"，也不会让链接变红——因为这些标签本身不渲染为可视节点。
真正能用style的，只有<p>、<div>、<span>、<header>这类视觉容器。语义化结构标签如<main>、<section>虽技术上支持，但滥用会让样式逻辑和文档结构耦合过紧，后续想抽离主题或做无障碍适配时会卡住。
最容易被忽略的一点：用style控制伪元素（::before）、响应式断点（@media）或CSS变量（--primary）全都不起作用——它们压根不会进入CSSOM。这种限制不是浏览器bug，而是规范设计使然。
