我一直在研究 SMACSS 和 OOCSS 等 CSS 编码方法。在做了一些功课并检查了大型网站（例如 Google、Facebook）的样式后，我注意到选择器名称非常混乱，例如 ._50x4 没有样式或内容语义。
我想知道这些较大的站点是否使用某种类型的名称修饰来为其 css 选择器命名？
问问题
1025 次
1 回答
4
重新指定您指定的特定选择器：._50x4在问题中。
这个选择器看起来确实很奇怪，但实际上它并没有无效或损坏。
类（或 ID）选择器以数字开头是无效的，因此.55x4无效。但是下划线是类的有效第一个字符。
因此，选择器._55x4实际上只是拥有一个名为 的类的一种方式55x4，但在它的开头带有下划线以使其有效。
你为什么想要一个名为 的类55x4？好吧，如果您想要真正的答案，您必须询问您在哪里找到它的网站的开发人员，但您提到了 Facebook 和 Google，所以我们可以推测一下。
Facebook 和 Google 都是流量极高的网站。因此，就他们而言，即使减少一个字符的 HTML/CSS/JS 代码大小也会对他们的带宽成本产生很大影响。
你或我可能用一个更易读的名字来命名这个类，但是当你试图节省每一个可能的带宽字节时，合理的名字就会消失。就像他们将 Javascript 代码缩小到不可读的程度一样，他们还将优化 HTML 和 CSS 代码以使其尽可能小。结果就是这样疯狂的类名。
这并不是说这个类名完全是疯狂的——你完全断章取义地引用了它，所以数字 55 和 4 很有可能适用于页面上的某些内容。我不知道，没有任何背景，其他人也不知道。
但我可以这么说：这是复制 Facebook 和 Google 不一定是最好的主意的一种情况。您没有与他们相同的流量级别，并且从您的代码中删除每个最后一个字节不应该对您具有与他们相同的优先级。当然你可以优化东西，但没有必要写出那样的类名。
要说的另一件事是，出于 SEO 的目的，合理的类名非常有帮助。Facebook 和（尤其是）谷歌可以忽略他们的 SEO 排名，但我们其他人不能。
所以不管你的方法是什么，类名都应该是语义的——即它们应该有意义，并帮助读者理解元素的用途。
通过查看知名站点以了解它们的功能，您正在做正确的事情，但我的建议是尝试查看与您自己的站点更接近的其他站点。Facebook 和 Google 在做事方式上总是会有些“不同”；他们并不总是最好的例子。
于 2013-04-26T14:53:32.380 回答