CSS选择器名称错误?

时间:2013-03-15 08:05:29

标签: css css-selectors

我一直在研究像SMACSS和OOCSS这样的CSS编码方法。在完成一些功课并检查较大网站的风格(例如Google,Facebook)之后,我注意到了非常严重的选择器名称,例如._50x4,没有风格或内容语义。

我想知道这些较大的网站是否正在使用某种类型的名称修改来进行css选择器命名?

1 个答案:

答案 0 :(得分:4)

在问题中重新指定您指定的特定选择器:._50x4

这个选择器确实看起来很奇怪,但实际上它并非无效或受损。

类(或ID)选择器以数字开头无效,因此.55x4无效。但是下划线是一个有效的第一个字符。

因此,选择器._55x4实际上只是一种名为55x4的类,但在其开头有一个下划线以使其有效。

为什么你想要一个名为55x4的班级?好吧,如果你想要真正的答案,你必须问问你网站的开发者,但是你提到了Facebook和Google,所以我们可以推测一下。

Facebook和Google都是高流量网站。因此,就他们而言,即使用一个字符缩小HTML / CSS / JS代码的大小也会对他们的带宽成本产生很大影响。

您或我可能已使用更易读的名称命名该类,但是当您尝试保存每个可能的带宽字节时,合理的名称就会消失。他们将Javascript代码缩小到难以理解的程度,他们也会优化HTML和CSS代码,使其尽可能小。像这样的疯狂类名是结果。

这并不是说这个类名完全疯了 - 你完全脱离了上下文引用它,所以数字55和4有可能适用于页面上的某些内容。我不知道,没有任何背景,没有其他任何人。

但我可以这么说:这是一个复制Facebook和谷歌不一定是最好的主意的案例。您没有与它们相同的流量级别,并且从代码中删除每个最后一个字节不应该具有与它们相同的优先级。当然你可以优化东西,但是没有必要编写类似的类名。

另一件要说的是,出于搜索引擎优化的目的,合理的类名非常有用。 Facebook和(特别是)谷歌可以放弃忽略他们的搜索引擎优化排名,但我们其他人不能。

因此,无论您的方法如何,类名都应该是语义的 - 即它们应该有意义,并帮助读者理解元素的用途。

通过查看知名网站看看他们做了什么,你做的是正确的,但我的建议是尝试查看更接近你自己的网站。 Facebook和谷歌在做事方面总是有点“不同”;他们并不总是最好的例子。