外部样式表路径错误导致CSS完全不生效，首要确认<link>的href路径与.css文件实际位置是否一致，通过Network面板查看.css请求状态码是否为404；常见错误包括相对路径基准错、混用反斜杠、子目录下HTML误用根级路径。
外部样式表路径写错导致CSS完全不生效
这是最常被忽略的硬性失败点：HTML里<link>标签的href路径和实际.css文件位置不一致，浏览器根本加载不到样式。不是“样式没起作用”，而是压根没发请求。
检查方法很简单：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 看是否有.css文件状态码为404。常见错误包括：
-
href="css/style.css"但文件实际在./styles/main.css - 用了相对路径却从子目录打开HTML（比如直接双击
pages/about.html），此时href="style.css"会去找pages/style.css而非项目根目录 - 路径中混用反斜杠
\（Windows资源管理器显示习惯）但HTML只认正斜杠/
class命名冲突与BEM规范落地卡点
现代CSS架构依赖可预测、可复用的类名，但很多重构项目卡在“改了class却不敢动HTML结构”。真实情况是：header__logo--dark这类BEM命名本身不强制要求HTML嵌套层级，只要语义对齐就行。
关键实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要把BEM当成枷锁——
btn btn--primary可以独立存在，不需要父容器叫btn-group - 避免用
div堆砌无意义wrapper，优先用语义化标签（nav、section、aside）降低选择器复杂度 - 重构时先统一提取重复样式到
.u-text-center、.u-mt-2等实用类（utility class），再逐步替换为BEM模块
Flex/Grid布局替代浮动后margin塌陷消失
老项目常用float实现两栏，靠overflow: hidden或clear: both解决父容器高度塌陷。换成display: flex或display: grid后，这些hack全部失效——因为flex容器天然不塌陷。
但新问题随之而来：
- 旧CSS里写的
.clearfix::after在flex容器里毫无作用，可直接删掉 - 原用
margin-top模拟顶部间距的子元素，在flex容器中可能被align-items: flex-start（默认值）压制，需显式设margin-top或改用gap - Grid布局中
grid-template-areas必须与HTML中class名严格对应，拼错一个字母样式就失效
@import在现代构建流程中已被淘汰
即便你没用Webpack/Vite，直接在<style>里写@import url("base.css");也属于过时做法。它会阻塞渲染，且无法被HTTP/2多路复用优化。
真正该做的只有两件事：
- 所有样式入口统一收口到一个
main.css，用@layer控制层叠顺序（Chrome 115+支持） - 如果必须拆分文件，用构建工具做
postcss-import或ESMimport（如import './base.css'配合Vite） - 绝对不要在CSS里用
@import加载远程字体或第三方样式——改用<link rel="stylesheet">并加media="print"等条件
:hover）、媒体查询（@media (min-width: 768px)）默认不计入统计。 
