真正可交付的HTML模板美化必须依赖外部CSS+语义化结构+可控作用域，通过:root声明CSS变量统一管理主题色与间距，支持暗色模式切换，避免内联样式及appearance: none单独使用导致的兼容问题。
直接用 style 属性写内联样式能快速出效果，但维护成本高、无法复用、不支持响应式断点——这不是“自定义样式”，只是临时涂改。真正可交付的 HTML 模板美化，必须靠外部 CSS + 语义化结构 + 可控作用域。
用 :root 声明 CSS 变量统一管理主题色和间距
CSS 自定义属性（即 CSS 变量）是控制模板风格最轻量又最灵活的方式。所有颜色、圆角、阴影、字体大小都集中定义在 :root 里，后续只需改一处，全站同步更新。
-
:root中声明变量时，值必须是合法 CSS 值，比如--primary-color: #0056b3;，不能带单位缩写（如1rem可以，1r不行） - 变量名建议用中划线分隔，避免大小写混用导致兼容问题（Firefox 对大小写敏感，Chrome 目前宽松）
- 在媒体查询中可重写变量值实现暗色模式切换，例如
@media (prefers-color-scheme: dark) { :root { --bg-color: #121212; } } - 不要在
style属性里试图用var(--x)—— 内联样式不支持变量函数，只认计算后的真实值
避免 appearance: none 单独使用导致表单控件失效
想让 <select> 或 <input type="range"> 看起来更现代？appearance: none 是第一步，但不是最后一步。它只是“清样式”，不等于“可定制”。
-
appearance: none必须配合厂商前缀才稳定：Chrome/Safari 加-webkit-appearance: none;，Firefox 加-moz-appearance: none; - 清掉
appearance后，<select>的下拉箭头不会自动消失，得额外处理：background: url(arrow.svg) no-repeat right center;或针对 IE/Edge 使用select::-ms-expand { display: none; } -
<input type="number">在 Safari 中即使加了appearance: none，仍可能显示上下微调按钮，必须补上::-webkit-inner-spin-button { appearance: none; } - 移除原生样式后，记得手动设置
border、padding、font等基础样式，否则控件会塌陷或文字错位
让 <textarea> 的 resize 手柄真正可用
设了 resize: vertical; 却点不动？大概率是手柄被挤出了可视区，而不是功能失效。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
overflow: hidden—— 这会直接裁剪掉右下角的手柄 - 不要给
<textarea>同时设max-width: 100%和resize: horizontal，宽度未撑满时手柄无处渲染 - 若用 Flex 或 Grid 布局包裹
<textarea>，需确保父容器有min-width: 0（Flex）或min-height: 0（Grid），否则拉伸行为会被约束 - 移动端 Safari 默认禁用
resize，必须显式写resize: vertical;才生效，resize: both在 iOS 上基本无效
HTML 模板中嵌入 JS 时 DOM 就绪时机要卡准
在 HTML 模板里加轮播图、表单验证或动态加载逻辑，脚本执行早于 DOM 渲染，就会报 Cannot read property 'addEventListener' of null。
- 把
<script>放在</body>前是最简单稳妥的做法，浏览器解析到此处时 DOM 已基本就绪 - 若必须放在
<head>，用defer属性加载外部脚本，它保证执行顺序且不阻塞解析 - 用
document.addEventListener('DOMContentLoaded', () => { ... })包裹操作逻辑，比window.onload更早触发，且不等图片加载完成 - Azure AD B2C 等托管平台的 HTML 模板中，DOM 插入是异步合并的，此时
DOMContentLoaded已触发完毕，需监听load事件或使用 MutationObserver 检测特定节点出现
真正难的不是写多少样式，而是判断哪些该由 CSS 控制、哪些必须靠 JS 补位、哪些在特定平台（比如 Azure AD B2C）里根本不可见——这些边界条件，才是模板落地时最容易卡住的地方。
