CSS选择器名称错误?

Dan*_*ees 6 css css-selectors

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

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

Spu*_*ley 5

._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 在做事方式上总是有点“不同”;他们并不总是最好的例子。