真正可交付的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></select> 或 <input type="range"> 看起来更现代？appearance: none 是第一步，但不是最后一步。它只是“清样式”，不等于“可定制”。
-
appearance: none必须配合厂商前缀才稳定：Chrome/Safari 加-webkit-appearance: none;，Firefox 加-moz-appearance: none; - 清掉
appearance后，<select></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></textarea> 的 resize 手柄真正可用
设了 resize: vertical; 却点不动？大概率是手柄被挤出了可视区，而不是功能失效。
- 检查父容器是否设置了
overflow: hidden—— 这会直接裁剪掉右下角的手柄 - 不要给
<textarea></textarea>同时设max-width: 100%和resize: horizontal，宽度未撑满时手柄无处渲染 - 若用 Flex 或 Grid 布局包裹
<textarea></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></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
