页面没变样是因为浏览器对main标签仅作默认块级渲染，无自带样式，所有视觉效果必须用css显式定义；需用class控制样式、避免纯元素选择器、命名应体现功能与范围、确保关css后html仍语义清晰。
为什么写了但页面没变样？
因为浏览器对 main 标签只做默认块级渲染，不带任何样式。你写了 <main></main> ≠ 页面自动有边距、背景或字体——所有视觉表现都得靠 CSS 显式定义。
常见错误现象：main { margin: 2rem; } 在项目里被重置 CSS 或第三方库覆盖，结果什么都没生效；或者团队成员直接写 div.main，绕过语义标签，后续加无障碍支持时发现 DOM 结构无法被屏幕阅读器识别。
- 必须用类名控制样式，例如
<main class="page-main"></main>，再写.page-main { margin: 2rem; } - 避免纯元素选择器（如
main、nav）写全局样式，容易被!important或更高权重规则压制 - 如果真要用语义标签做选择器，务必搭配 class，比如
main.page-main，提升优先级也增强可读性
class 名该写 .header 还是 .site-header？
写 .site-header。语义化 class 名不是为了“看起来像 header”，而是表达它在当前上下文中的角色和范围。
反模式：.header 容易歧义——是整个站点的页头？还是某个卡片内部的标题栏？CSS 里一旦出现 .header h1，就可能误命中非预期区域；更糟的是，换主题时想统一改所有页头样式，却发现 .header 被复用在了弹窗、侧边栏甚至表单分组里。
- 推荐命名：以功能+范围组合，如
.site-header、.article-header、.modal-header - BEM 中块名应反映内容本质，不是容器位置，避免
.left-nav（布局变就失效）、.red-button（换色就得改名） - 工具类统一前缀，如
u-text-center，JS 钩子用js-dropdown-trigger，确保 class 不承担多重语义
关掉 CSS 后页面还能看懂吗？
这是验证解耦是否到位的硬指标。打开 DevTools → Settings → Preferences → 取消勾选 “Disable styles”，观察纯 HTML 渲染效果。
如果只剩一堆扁平 div 堆叠、标题层级混乱、列表看不出是列表、导航链接散落在段落中间——说明语义缺失，后续加 a11y、SEO 或响应式都会反复返工。
-
header必须包裹 logo + 主导航，且内部嵌套nav才算语义闭环 -
main全页唯一，不能出现在section或article内部；否则屏幕阅读器可能跳过它 - 所有列表必须用
ul/ol，禁用div.list+display: list-item模拟 -
hr是主题分隔符，不是画线工具；需用 CSS 重置外观，如.major-break { height: 2px; }
data-* 属性到底该不该用来写样式？
可以，但仅限标记行为意图，不能替代 class 做常规样式控制。
比如 <div data-role="mobile-menu"> 配合 <code>[data-role="mobile-menu"] { position: fixed; } 是合理用法；但写成 <div data-color="primary"> 再用 <code>[data-color="primary"] { color: #007bff; } 就违背了解耦原则——这等于把视觉变量塞进了结构层。
-
data-适合表达“它行为上是什么”，如data-type="modal-trigger"、data-state="open" -
class应描述“它看起来像什么”，如.btn-primary、.card-featured -
[data-*]选择器性能略低于 class，且不支持伪类动态响应（[data-open]:hover合法，但[data-open]不会随 JS 切换自动更新状态）
真正卡住解耦落地的，往往不是技术不会用，而是关掉 CSS 后没人去验证那一页 HTML 是否还说得清自己是谁、谁是主内容、哪是导航、哪是列表。这点一旦忽略，后面补 a11y、调 SEO、改主题色，全得回溯重构。
