44

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

他们是否故意混淆它们？还是他们的 IDE 做到了？为开发取这样难以理解的名称似乎不合逻辑

例如 - 这是 gmail 的刷新按钮。将 id/class 设置为“刷新”是合理的

<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 具有可读的名称

4

2 回答 2

24

更新：CSS 模块

这种做法现在被称为“CSS 模块”，并且随着 Webpack 的流行而被广泛采用。这个概念是将 CSS 选择器转换（散列）成唯一的类名，以确保模块之间没有样式冲突。

Webpack的css-loader 模块有一个modules启用此功能的选项。它通常与 React 一起使用，您可以通过导入 CSS 文件提供的 JS 对象在标记中分配类名，例如

import styles from './style.css

如果那个 CSS 文件有一个选择器，例如.sidebar，它通过

className={styles.sidebar} // JSX

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

原答案↓</h3>

这将是缩小和压缩的产物。毫无疑问，它会用人类可读的 id 和类名来编写，但就像 Zeta 评论的那样，然后用缩写代替这些以节省字节。这样的事情对于一般的网站来说并不重要，但是当你每分钟获得数十亿的网页浏览量时，这一切都很重要。

看看jQuery的开发版和生产版之间的区别。这是缩小和压缩结果的示例。

于 2013-02-07T12:39:13.273 回答
0

发生这种情况是因为他们编译了他们的代码，我的意思是，像谷歌一样，他们用 Java 编写代码，其余的一切都是用GWT处理的，他们使用 C 编写的 facebook，然后做同样的事情。

于 2014-07-18T12:36:54.753 回答