CSS类选择器严格区分大小写，.Header不匹配class="header"；HTML解析宽容但CSS匹配逐字符一致；动态生成、构建工具、路径及BEM规范均需严格保持大小写统一。
CSS 类选择器本身是大小写敏感的，所谓“CSS 大小写不敏感”是个常见误解——真正不敏感的是 HTML 的 class 属性值在解析时对大小写的宽容（仅限于 HTML 文档模式），而 CSS 选择器匹配过程始终严格区分大小写。
为什么 .Header 不匹配 class="header"
浏览器把 .Header 和 .header 当作两个完全不同的类名。哪怕 HTML 中写的是 class="header"，CSS 里用 .Header、.HEADER 或 .Header 都不会命中。这不是兼容性问题，而是规范行为：CSS 选择器标识符（包括类名、ID、属性值等）必须逐字符一致。
-
class="user-card"只能被.user-card匹配，.User-Card或.userCard均无效 - Vue/React 中通过
className或class动态拼接时，变量值若含大写字母（如variant = 'Primary'），生成的btn-Primary就无法被.btn-primary覆盖 - 构建工具（如 Webpack + CSS Modules）默认将类名哈希化，但原始源码中大小写不一致会导致哈希前就失配，DevTools 里甚至看不到对应规则
HTML 属性值“看似不敏感”其实是陷阱
在 HTML 文件中，class="Header" 和 class="header" 都能被浏览器正常解析为字符串，但这只是 HTML 解析器的宽容；一旦进入 CSS 匹配阶段，它只认你写的那个确切字符串。更危险的是：某些模板系统（如 Django 模板、PHP echo 输出）可能自动转义或截断，导致实际渲染出的 class 值与预期不符。
- 检查 Elements 面板中目标元素的
class属性值，右键 → “Edit as HTML”，确认是否混入了全角空格、不可见 Unicode 字符或意外的大写字母 - JS 动态添加时避免手拼：
el.classList.add('Btn-Active')≠.btn-active；推荐用clsx或常量对象约束输出 - Linux 服务器或 Docker 容器中部署时，
header.css和Header.css是两个文件——路径大小写错误也会间接导致样式表根本没加载
如何快速验证类名是否匹配成功
别依赖肉眼比对，用 DevTools 直接查真实值和计算结果：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板选中元素，看
class属性值——注意前后空格、连字符数量、大小写 - 切换到 Styles 面板，搜索你的类选择器名（如
.card-header），如果整条规则压根没出现，大概率是语法错误或选择器未匹配；如果出现但带删除线，说明被更高优先级规则覆盖 - 在 Console 中运行：
getComputedStyle($0).getPropertyValue('color')，若返回空字符串或初始值，再查$0.className确认类名是否真存在
最常被忽略的一点：BEM 规范里 block__element--modifier 的大小写是契约的一部分，不是风格偏好。写错一个字母，自动化 lint 工具会报错，CI 构建可能失败，而本地开发却因缓存或宽松环境“看起来正常”。
