纯html+css模块化关键在语义化标签划分结构边界、bem类名体现模块层级关系、css modules实现样式隔离，需构建工具支持，纯静态页可用命名空间前缀替代。
纯 HTML + CSS 实现模块化开发，关键不在“堆功能”，而在结构可控、样式不串、复用不破。它不需要框架，但必须有约束。
用语义化标签组合代替 div 嵌套
盲目套 <div> 会导致结构不可读、SEO 友好度低、无障碍支持弱。语义标签不是“加分项”，而是模块边界的天然锚点。
<ul>
<li>
<code><header></header> 和 <footer></footer> 应只用于页面级或模块级首尾，不要用它包一个按钮组
<section></section> 必须有明确主题，比如“用户评价”“产品参数”，空的 <section></section> 是结构污染<article></article> 内部不能再嵌套 <article></article>（除非是评论嵌套），否则语义塌缩<div> —— 且必须加有意义的 class，如 <code>class="product-grid"，而非 class="box1"
CSS 类名必须体现模块边界与层级关系
BEM 不是教条，但它是防止样式泄漏最轻量的方案。重点不是写全 block__element--modifier，而是让 class 名能回答三个问题：这是谁？属于谁？现在是什么状态？
- 块名（Block）应对应一个可独立理解的 UI 单元，如
.card、.search-bar，避免用.main或.content这类泛称 - 元素（Element）必须是块的直接子节点，
.card__image合法，.card__image__caption违反 BEM 原则，应改为.card__caption - 修饰符（Modifier）只用于开关类状态，如
.button--disabled，不用于描述位置（.button--top），那属于布局职责，应交由父容器控制
模块样式隔离必须靠构建工具，纯 HTML 引入 .css 文件无效
很多人以为给每个模块写个 card.css 就算模块化了，其实只是文件拆分，class 依然全局可见。真隔离得靠 CSS Modules。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Webpack 中启用
css-loader的modules: true是前提，但仅此不够；必须配合localIdentName: "[name]_[local]_[hash:6]"，否则调试时找不到对应源码 - 路径匹配要排除
node_modules和公共样式（如reset.css），否则import 'bootstrap/dist/css/bootstrap.min.css'会被重命名，样式全崩 - HTML 中不能直接写
class="card__title"—— 编译后它已变成_card__title_abc123，必须通过 JS import 模块对象后取值：styles.card__title - 若项目完全无 JS 入口（纯静态页），CSS Modules 不适用，此时应改用命名空间前缀（如
.u-card__title）+ 构建时自动加前缀的 PostCSS 插件
复用模块时，HTML 结构和 CSS 必须同步迁移
把一个 <aside class="sidebar"></aside> 复制到新页面，却漏掉对应的 .sidebar 样式规则，是最常见的“模块失效”。模块不是 HTML 片段，而是结构 + 样式 +（可选）行为的最小闭环。
- 使用
<template></template>标签预存模块 HTML 时，务必在同文件或相邻<style></style>块中定义对应样式，或确保构建流程能识别并注入关联 CSS - 通过 Webpack/Vite 的
html-webpack-plugin或vite-plugin-html注入公共片段时，模板里写的 class 必须和实际加载的 CSS Modules 输出名一致（即走 JS import 路径） - 服务端 include（如 PHP 的
include 'header.php'）可行，但 header.php 必须声明所需 CSS 文件路径，不能假设全局已加载
最容易被忽略的一点：模块化不是为了“看起来整齐”，而是为了降低修改成本。当你改一个卡片的圆角，发现三页都崩了，说明模块边界没划清；当你加一个新修饰符，要翻五个文件找 !important 覆盖点，说明样式层叠失控了。结构和样式的耦合深度，永远比你想象中更隐蔽。
