为什么专业制作的网站有奇怪的#id和.class名称?

时间:2013-02-07 07:55:50

标签: css

我注意到facebook和gmail有很奇怪的#id和.class名称。

他们是否故意混淆了他们?或者他们的IDE做到了吗? 拥有这样难以理解的开发名称似乎不合逻辑

例如

- 这是gmail的刷新按钮。将id / class设为“refresh”

是合理的
<div class="G-Ni J-J5-Ji" style="">
<div class="T-I J-J5-Ji nu T-I-ax7 L3" act="20" role="button" tabindex="0" style="-webkit-user-select: none;" data-tooltip="Refresh" aria-label="Refresh">
<div class="asa">
<span class="J-J5-Ji ask">&nbsp;</span><div class="asf T-I-J3 J-J5-Ji"></div></div></div></div>

和facebook的状态更新发布按钮

<button class="_42ft _42fu _11b selected _42g-" type="submit">Post</button>

关于性能 - 确实有更短的名称真正影响加载时间?它似乎是(对于像facebook或gmail这样的大页面)多了100kb,今天的宽带线在所需的时间内可以忽略不计

异常 - twitter和pinterest有可读名称

2 个答案:

答案 0 :(得分:14)

更新:CSS模块

这种做法现在被称为“CSS模块”,并且随着Webpack的普及而越来越广泛采用。这个概念是将CSS选择器转换(散列)为唯一的类名,以确保模块之间不存在样式冲突。

Webpack的css-loader modulemodules选项,可启用此功能。它通常与React一起使用,您可以通过导入CSS文件的JS对象在标记中指定类名,例如

import styles from './style.css

如果该CSS文件具有选择器,例如.sidebar,它通过

应用于标记
className={styles.sidebar} // JSX

Webpack将散列类名和结果选择器以确保唯一性。

原始答案↓

这将是缩小和压缩的产物。毫无疑问,它将使用人类可读的id和类名称编写,但是像Zeta所评论的那样,这些将被缩写替换以节省字节。这些事情对普通网站来说无关紧要,但是当你每分钟获得数十亿的综合浏览量时,这一切都很重要。

看看jQuery的developmentproduction版本之间的区别。这是缩小和压缩结果的一个例子。

答案 1 :(得分:0)

这是因为他们编译了他们的代码,我的意思是像google他们在java中编写代码并且休息全部用GWT处理他们用C编写的facebook然后做同样的事情。