html5中标签应避免内联“一锅炖”式css，需按语义区块分组并注释；优先用语义类名替代元素选择器；限制选择器层级；可适度使用css变量和媒体查询提升可维护性与响应能力。
在HTML5中，<style></style>标签内直接写CSS虽方便，但缺乏结构化管理容易导致样式混乱、复用困难、维护成本高。建议避免“一锅炖”式书写，转而采用轻量级但清晰的组织逻辑。
按语义区块划分样式
将<style></style>内容按页面功能或内容区域分组，用注释明确标识，例如：
/* === 导航栏 === */
.nav { margin: 0; padding: 1rem 0; }
.nav a { color: #333; text-decoration: none; }
<p>/<em> === 主内容区 === </em>/
.main-content { max-width: 800px; margin: 0 auto; }
.main-content h2 { font-size: 1.5rem; border-bottom: 1px solid #eee; }</p><p>/<em> === 表单组件 === </em>/
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.25rem; }</p>这种划分不依赖构建工具，纯手工即可执行，利于快速定位和协作理解。
优先使用类名而非元素选择器
避免直接写 p { ... } 或 h3 { ... }，改用语义化类名（如 .text-lead、.heading-sm），好处是：
- 样式作用范围可控，不意外影响全局元素
- 便于在不同HTML结构中复用同一套视觉规则
- 为未来迁移到外部CSS或CSS-in-JS预留兼容性
控制特异性，避免嵌套过深
<style></style>内样式仍受CSS层叠与特异性规则约束。应限制选择器层级，例如：
- ✅ 推荐：
.card .title、.btn-primary - ❌ 避免：
.container > .row > .col-12 > .card > h3 > span
深层嵌套不仅难维护，还可能因HTML结构调整而失效，也增加覆盖难度。
必要时引入简单变量与媒体查询
HTML5原生支持CSS自定义属性（CSS变量）和响应式查询，可在<style></style>中适度使用：
:root {
--primary-color: #4a6fa5;
--spacing-md: 1.25rem;
}
<p>.button {
background-color: var(--primary-color);
padding: 0.5rem var(--spacing-md);
}</p><p>@media (max-width: 768px) {
.nav { flex-direction: column; }
}</p>变量提升一致性，媒体查询保障基础响应能力——无需外部预处理器，现代浏览器均支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
