CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 为什么专业网站有奇怪的#id和.class名称?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我注意到facebook和gmail有很多#id和.class名字.

他们有意混淆它们吗?还是他们的IDE呢?@H_675_3@有这样不可读的开发名称似乎是合乎逻辑的

例如 – 这是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="@R_607_7017@h" aria-label="@R_607_7017@h">
<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有可读名称

解决方法

@H_197_20@ 更新:CSS模块

这种做法现在被称为“CSS模块”,随着Webpack的普及而越来越广泛的应用.这个概念是将(哈希)CSS选择器转换成唯一的类名,以确保模块之间没有样式的冲突.

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

import styles from './style.css

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

className={styles.sidebar} // JSX

Webpack将散列类名称和高级选择器以确保唯一性.

原始答案↓

这将是缩小和压缩的产物.毫无疑问,用人类可读取的id和类名可以写出来,但是像Zeta已经评论过的那样,这些代码用缩写代替来保存字节.这样的事情对于普通网站来说并不重要,但是当您每分钟浏览几十页浏览量时,这一切都是重要的.

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

大佬总结

以上是大佬教程为你收集整理的css – 为什么专业网站有奇怪的#id和.class名称?全部内容,希望文章能够帮你解决css – 为什么专业网站有奇怪的#id和.class名称?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。