随机生成的类名叫啥？

Posted 2023-02-26

【中文标题】随机生成的类名叫啥？

【英文标题】：What are randomly generated class names called?随机生成的类名叫什么？

【发布时间】：2020-07-11 12:10:29

【问题描述】：

我看到很多网站都在做的事情是让类名看起来是随机的。我敢肯定它们在后端并不是真正随机的，但是看看前端的类名称，就会出现这种情况。一些这样做的网站：

https://google.com https://toptal.com

这是一个例子：

<div class="_1bjWP7av"></div>

这是如何实现的？

【问题讨论】：

也许是非确定性 vs 确定性...确定性 --> "my-container" 非确定性 --> "_1bjWP7av"

【参考方案1】：

在前端开发中，通常使用像 BEM 这样的 CSS 命名约定来在描述性标准中命名 CSS 类和 ID。这些 CSS 类可能会相当长，这取决于父元素的名称等等。我在开发人员代码中看到了大约 40 个字符的 CSS 类。对于足够大的网络应用程序，它们分散在整个代码中。这些额外的字符会增加 CSS、html、JS 等文件的大小（对于足够大的应用程序来说是相当大的）。

作为“生产”构建的一部分，Angular 等框架会“缩小”和“丑化”代码以使其占用空间更小。通过删除空格、更改变量名称、函数名称、CSS 名称等，用户需要下载/缓存的代码大小大大减少。我无法确切说明 Google 和 Toptal 正在做什么，但他们都在使用 Angular，因此他们可能正在利用这种 angular-cli 生产模式构建来减少占用空间。如果我没记错的话，同样可以通过 Webpack 使用 css-loader 完成。

【参考方案2】：

只需选择他们想要命名类的方式即可完成。您可以以同样的方式为您的网站设置自己的命名约定。

其中一些命名约定可以使类具有简短的“随机”名称，这些名称（供该公司选择）表示（或映射到）特定值，例如_x1 可能表示类，否则编写更具描述性如NavigationBarSpecialBackgroudProperties

这主要用于使用构建工具构建的页面，这些工具负责映射那些“HumanReadable”类名称，并将它们映射到较短的内容，以便网页输出 HTML 的整体大小更小，这如果该页面每天打开任务次数，则可以节省带宽。

每个公司或开发团队基本上都是自己决定的。