CSS选择器名称改变？

Question

我一直在寻找像SMACSS和OOCSS这样的CSS编码方法。在完成一些作业并检查大型网站（例如Google，Facebook）的样式之后，我注意到了非常干扰的选择器名称，例如.50x4，没有文体或内容语义。

我想知道这些较大的网站是否使用某种类型的名称为他们的CSS选择器命名？

Answer 1

重新指定您指定的特定选择器：._50x4。

这个选择器确实看起来很奇怪，但实际上它不是无效的或者是破损的。

它是一类（或ID）选择器来以数字开始无效，因此.55x4将是无效的。但下划线是一个类的有效的第一个字符。

因此，选择器._55x4实际上只是一个名为55x4的类的方法，但在其起始处有一个下划线以使其有效。

为什么你想要一个名为55x4的类？那么，如果你想得到真正的答案，你必须向网站的开发者询问，但你提到了Facebook和Google，所以我们可以推测一下。

Facebook和谷歌两者都是非常高流量的网站。因此，就他们而言，甚至通过单个字符来缩小其HTML/CSS/JS代码的大小也会对带宽成本产生很大影响。

你或我可能已经命名为更具可读性的名称的类，但是当你试图节省带宽的每一个可能的字节，懂事的名字走出去的窗口。与他们将Javascript代码缩小到无法读取的程度相同，他们也会优化其HTML和CSS代码，使其尽可能小。疯狂的类名是这样的结果。

这并不是说这个类名是彻底疯了 - 你已经完全引用它断章取义，所以有充分的机会，55号和4可以适用于一些在页面上。我不知道，没有任何语境，没有其他人。

但我可以这么说：这是复制Facebook和Google不一定是最好的主意的一种情况。您的流量级别与他们的流量级别不同，并且将代码中的每个最后一个字节都删除不应该与您的代码具有相同的优先级。当然你可以优化东西，但是不需要编写看起来像这样的类名。

另一件要说的是，对于搜索引擎优化的目的，明智的类名非常有帮助。 Facebook和（特别是）谷歌可以放弃忽视他们的SEO排名，但我们其他人不能。

所以不管你的方法中，类名应该是语义 - 也就是说，它们应该是有意义的，并且帮助读者了解哪些元素是。

你通过看众所周知的网站，看看他们做什么，做正确的事，但我的建议是尝试寻找更接近自己的其他网站。当谈到他们如何做事时，Facebook和Google总是会有点“不同”;他们并不总是最好的例子。