Rails项目中CSS类不生效且未在检查器显示的诡异问题

我在多个Rails项目里反复碰到一个离谱的问题：编写CSS时，某一行样式或者某个类突然完全不生效，而且浏览器检查器里根本看不到这个类的任何样式规则（正常CSS失效一般是类会显示但样式被划掉）。

问题重现场景 #

比如这段HTML代码：

<div class="text-step">
  <%= image_tag "pay_icon.png" , height: 40 %>
  <h3>Pay by card</h3>
  <p>Pay in less than 1 minute</p>
</div>

对应的CSS规则：

.text-step { width: 45vw; }

打开浏览器检查器，只能看到元素的默认样式，完全找不到.text-step相关的任何规则，就像这行CSS从来没写过一样。

踩过的无效排查坑 #

我几乎试遍了常规排查方法，全没用：

• 禁用浏览器网络缓存、清空本地缓存
• 删除CSS文件中其他所有内容，只保留这一行规则（排查语法错误）
• 修改类名，排除命名冲突的可能
• 确认CSS已正确编译，在页面源码里能看到这行样式
• 新增其他类都能正常生效，唯独这行不管怎么改类名都没用，只能临时用内联CSS应急

更诡异的是，这个问题在不同项目里都出现过，有时候隔段时间自己又莫名其妙恢复正常了。

最终找到的罪魁祸首 #

原来是类名和大括号之间的空格是Mac上误按Alt+Space输入的非断空格！这种空格肉眼和普通空格完全无法区分，但CSS解析器不识别它，直接跳过了整行样式规则。

内容的提问来源于stack exchange，提问作者Jessicascn