BEM规范要求每个class严格对应block、element或modifier单一语义层级，禁止拼凑命名与跨层级嵌套；block须有业务含义且可独立复用，element仅限直属子节点，modifier必须与对应block或element共存。

前端模块化：html结构与css样式的精准协作艺术

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 写 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，才是真相。

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

href 路径必须从 HTML 文件位置出发计算，比如 index.html 和 css/style.css 同级，则写 href="css/style.css"；若写成 href="/css/style.css"，就变成从根目录找，容易错
必须放在里，且要在之后、任何 <script></script> 之前；放 底部会导致 FOUC（闪白屏）或部分样式延迟生效
检查 rel="stylesheet" 是否拼错，漏掉 rel 属性或写成 rel="style"，浏览器直接忽略该标签




选择器写成 main > article > header > h1 为什么一改结构就崩？
这种深度嵌套选择器把样式和 DOM 结构强绑定。只要中间任意一层标签变动（比如 article 换成 section，或者加了个 div 包裹层），整个选择器就失效——不是语法错，是匹配不上了。

优先用 class 定位： + .page-title { … }，结构变不影响样式
属性选择器更可靠：nav a[href] 比 .menu-link 更稳，因为 href 是 HTML 固有属性，不用靠人工维护 class 名
慎用 :not() 和 :is()：旧版 Safari（≤15.4）或安卓 WebView 支持不稳定，关键样式别依赖它们

真正难的不是写出能跑的代码，而是写出改起来不心惊肉跳的代码——class 名是否可预测、语义标签是否真承载语义、选择器是否经得起结构调整，这些细节堆起来，才决定一个项目三年后还敢不敢动。