BEM规范要求每个class严格对应block、element或modifier单一语义层级，禁止拼凑命名与跨层级嵌套；block须有业务含义且可独立复用，element仅限直属子节点，modifier必须与对应block或element共存。
HTML结构和CSS样式不是“配对成功”就完事，而是要让每个 class、每个语义标签、每个选择器都承担明确职责——否则协作越“紧密”，后期越难改。
为什么 class 名不能写成 red-btn 或 left-sidebar
这类名字把样式或布局细节塞进 class 名里，等于把 CSS 逻辑提前“固化”在 HTML 结构中。一旦设计改版：按钮换主题色，就得全局搜 red-btn 改成 blue-btn；侧边栏从左移到右，left-sidebar 就名不副实，但删它又怕影响 JS 钩子。
- 用语义或功能命名：
primary-cta（主操作按钮）、user-nav（用户导航），哪怕换肤、换布局也不用动 class 名 - 团队统一前缀规则，比如
u-开头的工具类（u-text-center）、js-开头的纯行为钩子（js-modal-trigger），避免样式类被 JS 意外依赖 - BEM 是目前最易落地的方案：
card（块）、card__title（元素）、card--featured（修饰符），层级清晰，不怕嵌套深
header、nav 这些语义标签默认没样式，写了也白写？
没错。浏览器对 header、nav、section 等标签只做“块级容器”处理，既无 margin，也无 font-size，视觉上和 div 完全一样。你写了 <header><h1>首页</h1></header>，但没给 header 写 CSS，它就真的一点存在感都没有。
- 必须手动定义基础样式，例如：
header { padding: 1rem 0; border-bottom: 1px solid #eee; } - IE8 及更早版本不认识这些标签，得引入
html5shiv脚本，否则连 DOM 节点都建不出来，CSS 更无从谈起 - 别为了“语义”硬套标签：纯布局容器（比如某个 flex 包裹层）不需要传达内容意图时，
div更轻量、更可控
link rel="stylesheet" 加载失败，浏览器根本不报错？
对。CSS 加载失败是静默失败：HTML 正常渲染，页面只是“没样式”，看起来像一堆裸 div 堆在一起。开发者工具 Network 面板里 style.css 显示 404 或 blocked，才是真相。
立即学习“前端免费学习笔记（深入）”；
-
href路径必须从 HTML 文件位置出发计算，比如index.html和css/style.css同级，则写href="css/style.css"；若写成href="/css/style.css"，就变成从根目录找，容易错 -
<link>必须放在里，且要在<title></title>之后、任何<script></script>之前；放底部会导致 FOUC（闪白屏）或部分样式延迟生效 - 检查
rel="stylesheet"是否拼错，漏掉rel属性或写成rel="style"，浏览器直接忽略该标签
选择器写成 main > article > header > h1 为什么一改结构就崩？
这种深度嵌套选择器把样式和 DOM 结构强绑定。只要中间任意一层标签变动（比如 article 换成 section，或者加了个 div 包裹层），整个选择器就失效——不是语法错，是匹配不上了。
- 优先用 class 定位：
<h1 class="page-title"></h1>+.page-title { … }，结构变不影响样式 - 属性选择器更可靠：
nav a[href]比.menu-link更稳，因为href是 HTML 固有属性，不用靠人工维护 class 名 - 慎用
:not()和:is()：旧版 Safari（≤15.4）或安卓 WebView 支持不稳定，关键样式别依赖它们
真正难的不是写出能跑的代码，而是写出改起来不心惊肉跳的代码——class 名是否可预测、语义标签是否真承载语义、选择器是否经得起结构调整，这些细节堆起来，才决定一个项目三年后还敢不敢动。
