为什么专业网站上的#id和.class名称是奇数? [英] Why do professional-made websites have odd #id and .class names?
问题描述
我注意到facebook和gmail的#id和.class名称确实很奇怪.
I noticed that facebook and gmail have really odd #id and .class names.
他们是否故意混淆他们?还是他们的IDE做到了? 拥有如此难以理解的开发名称似乎不合逻辑
Do they obfuscate them on purpose? or does their IDE does it? It doesn't seem logical to have such unreadable names for development
例如-这是gmail的刷新按钮.将ID/类别设为刷新"是合理的
for example - this is gmail's refresh button. It would be reasonable to have id/class as "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"> </span><div class="asf T-I-J3 J-J5-Ji"></div></div></div></div>
和Facebook的发布按钮以更新状态
and facebook's post button for status update
<button class="_42ft _42fu _11b selected _42g-" type="submit">Post</button>
关于性能-名称缩写是否真的会影响加载时间?看起来(对于较大的页面，例如facebook或gmail)要多出100kb，而今天的宽带线路在所需的时间内可以忽略不计
on performance - does have shorter name really impact load times? it would seem it is (for a large page such as facebook or gmail) a couple of 100kb more, which with today broadband line is negligible for the time needed
例外-twitter和pinterest具有可读的名称
on exception - twitter and pinterest have readable names
推荐答案
更新:CSS模块
这种做法现在被称为"CSS模块"，并且随着Webpack的流行而被越来越广泛地采用.其概念是将CSS选择器转换(散列)为唯一的类名，以确保模块之间样式不会发生冲突.
Update: CSS Modules
This practice is now known as "CSS Modules" and is becoming more widely adopted with the popularity of Webpack. The concept is to transform (hash) CSS selectors into unique class names, to ensure that there are no collisions of styles between modules.
用于Webpack的 css-loader模块具有modules启用此功能的选项.它通常与React一起使用，您可以在其中通过导入CSS文件(例如
The css-loader module for Webpack has a modules option which enables this feature. It is commonly used with React, where you assign class names in your markup via a JS object made available by importing the CSS file, e.g.
import styles from './style.css
如果该CSS文件具有选择器，例如.sidebar，它通过
If that CSS file has a selector, e.g. .sidebar, it is applied in the markup via
className={styles.sidebar} // JSX
Webpack将对类名和匹配选择器进行哈希处理以确保唯一性.
Webpack will hash the class name and matcing selector to ensure uniqueness.
这将是缩小和压缩的产物.毫无疑问，它是用人类可读的ID和类名编写的，但是就像Zeta所评论的那样，然后将它们替换为缩写以节省字节.这样的事情对一般的网站来说并不重要，但是当您每分钟获得数十亿的浏览量时，这一切都非常重要.
This would be a product of minification and compression. It would no doubt be written with human readable id and class names, but like Zeta has commented, these are then substituted with abbreviations to save bytes. Such things don't matter to the average website, but when you're getting billions of pageviews an minute, it all counts.
Take a look at the difference between the development and production versions of jQuery. This is an example of the result of minification and compression.
这篇关于为什么专业网站上的#id和.class名称是奇数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
