不建议将样式仅写在<style>标签里，因其无法长效缓存、难以跨页复用、维护成本高；应优先使用外部CSS文件，仅极简场景或首屏关键样式才用<style>块。
为什么不能把样式写在style标签里就完事？
因为style标签内联在HTML中，虽能快速预览效果，但会破坏结构与样式的物理分离。一旦多个页面共用相似布局，你得在每个HTML里重复维护同一套CSS规则；更糟的是，浏览器无法对style块做长效缓存——每次加载都得重新下载整个HTML，拖慢首屏。
常见错误现象：style里写了.btn { color: #007bff; }，结果另一个页面也要按钮样式，又复制一遍，后来改颜色漏改一处，UI就出现不一致。
- 所有通用样式必须抽离为独立
.css文件，通过<link rel="stylesheet" href="main.css">引入 - 若某页有极少量专属样式（如活动页临时Banner），可用
<style>块，但必须加注释说明“仅本页有效”，且上线前需评估是否值得单独维护 - 禁止在
style属性里写内联样式，例如<div style="margin: 10px;">——这类写法无法被CSS选择器覆盖，调试时优先级过高，后期几乎无法统一调整
class命名怎么避免“div1”“box2”这种反模式？
命名不是为了编译通过，而是让人一眼看懂语义和用途。用div1这类无意义名，等于把结构逻辑藏进CSS里，后续改版时根本不敢动——怕删错一个类名导致三处页面崩掉。
使用场景：组件化开发中，一个商品卡片可能被复用于首页、搜索页、分类页，它的样式必须可预测、可继承、可组合。
立即学习“前端免费学习笔记（深入）”；
- 采用BEM规范，例如
product-card（块）、product-card__title（元素）、product-card--featured（修饰符） - 避免用位置或样式特征命名，比如
left-sidebar（布局变就失效）、red-button（换主题色就得重命名） - 团队内统一前缀，如
u-text-center（工具类）、js-dropdown-trigger（仅作JS钩子，不带样式）
如何让HTML不依赖CSS就能基本可读？
解耦的底层目标不是“HTML光秃秃”，而是“HTML即使没加载CSS，也能表达内容层级和意图”。很多项目一关样式就变成满屏div堆叠，说明语义缺失，后续加无障碍（a11y）或SEO优化都会踩坑。
性能影响：语义化标签（如<article>、<nav>、<header>）本身不增加体积，但能让浏览器更快构建DOM树，也便于CSS用section > h2这类上下文选择器精准控制，避免过度依赖!important硬覆盖。
- 用语义化标签替代纯
div，例如导航用<nav>而非<div class="nav"> - 标题必须用
<h1>~<h6>按层级嵌套，不用<span class="h2-style"> - 列表内容必须用
<ul>/<ol>，不要用<div class="list">+display: flex模拟
JS操作DOM时，为什么别直接改element.style.xxx？
因为这等于把表现层逻辑偷偷塞回行为层，破坏三层分离。更实际的问题是：它会覆盖CSS文件里所有同名属性，包括媒体查询、伪类状态（如:hover）、甚至其他JS模块设的样式，调试时完全找不到源头。
容易踩的坑：点击按钮变红，你写btn.style.color = 'red'，结果用户缩放屏幕触发了@media (max-width: 768px)里的color: blue，但内联样式权重更高，蓝字永远出不来。
- 所有样式变更统一走
classList增删，例如btn.classList.add('is-active') - 需要动态计算样式（如拖拽定位），用
transform代替top/left，减少重排（reflow） - 绝对必要改内联样式时，务必加注释说明原因，并确保该操作不可被CSS类覆盖（比如只用于动画过渡值）
div1，JS加功能时不误伤视觉表现——这些边界一旦模糊，改一个小需求就得通读三个文件。 
