html与css必须物理分离，否则维护成本指数级上升；标签无长效缓存、无法跨页复用，易致ui不一致；通用样式须抽离为外部css文件，仅极简专属样式可例外使用并加注释。
HTML 和 CSS 必须物理分离，否则维护成本会指数级上升——这不是风格偏好，而是工程底线。
为什么不能把样式写在 <style></style> 标签里？
看似省事，实则埋雷。浏览器对 <style></style> 块不做长效缓存，每次加载 HTML 都得重传全部样式；多个页面共用相似布局时，你会被迫复制粘贴，改一处漏一处。
- 常见错误现象：
<style>.btn { color: #007bff; }</style>写在首页，搜索页又抄一遍，后来统一换主题色时漏改某一页，UI 就出现不一致 - 性能影响：首屏 HTML 体积膨胀，关键资源无法并行加载，LCP 拖慢 200ms+ 是常态
- 正确做法：所有通用样式必须抽离为外部
main.css，通过<link rel="stylesheet" href="main.css">引入；仅极简专属样式（如临时活动 Banner）才允许用<style></style>，且必须加注释说明“仅本页有效”
class 名为什么不能叫 left-nav 或 red-btn？
这类名字把布局或视觉特征硬编码进结构，等于把 CSS 逻辑偷偷塞进 HTML。一旦导航移到右侧，或主题色改成深灰，你就得全局搜替换 class，还可能误伤其他地方。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 使用场景：商品卡片组件复用于首页、搜索页、分类页时，
product-card__title这类 BEM 命名能确保语义稳定、样式可预测 - 推荐命名方式：
product-card（块）、product-card__price（元素）、product-card--on-sale（修饰符） - 团队协作要点：统一前缀，如
u-text-center（工具类）、js-dropdown-trigger（纯 JS 钩子，不带样式）
如何验证 HTML 是否真正脱离 CSS 可读？
关掉所有 CSS 后，页面不该是一堆扁平 <div> 堆叠，而应能清晰表达内容层级和意图——这是语义化标签的底线价值，也是无障碍（a11y）和 SEO 的前提。
<ul><li>必须用 <code><header></header> 包裹顶部内容（logo + 主导航），不用 <div class="header">
<li>
<code><nav></nav> 专指独立导航单元，页脚链接、侧边栏菜单不属于它；<main></main> 全页唯一且不可嵌套在 <section></section> 或 <article></article> 内
<h1></h1>~<h6></h6> 层级嵌套，列表必须用 <ul></ul>/<ol></ol>，禁用 <div class="list"> + <code>display: list-item
解耦不是“不写样式”，而是让样式只对 class 生效
CSS 默认对 <header></header>、<nav></nav> 等标签只做块级渲染，毫无样式。写了语义标签 ≠ 页面自动美观——所有视觉效果都得靠 CSS 显式定义，且不能依赖元素选择器写全局样式。
- 反模式：
nav { padding: 1rem; }容易被第三方库重置或覆盖 - 推荐写法：
<nav class="primary-nav"></nav>+.primary-nav { display: flex; gap: 1.5rem; } - 行为标记建议：用
data-role="mobile-menu"替代class="mobile-menu"，再用[data-role="mobile-menu"] { position: fixed; }控制，避免 class 语义混杂
最常被忽略的点是：解耦的终点不是“HTML 能跑”，而是“HTML 不依赖任何 CSS 就能被屏幕阅读器准确解析、被搜索引擎结构化索引”。这一步没做到，后续所有性能优化和交互增强都是空中楼阁。
