Atlassian的Jira中的CSS类名称被混淆[关闭]

Question

我注意到在Jira中，他们对CSS类进行了模糊处理，因此它们看起来很奇怪，并且每次刷新页面都不同：

            <div class="sc-dYaWWc dJrjAK">
                <div class="sc-iLVaha hfGHeD">
                    <div class="sc-geAxOV krrXnm">
                        <div class="sc-bJT2cE bPFEwh">
                            <div class="sc-imDrJI jKvdHw">
                                <div class="sc-hAhkBK epXQAj">
                                ...

这背后的动机是什么，可能是为了防止爬虫或其他安全问题？对于一般的应用程序开发来说，这是值得的练习吗

Answer 1

混淆/加扰CSS类名称的主要原因是usage of CSS modules提供样式封装和大小缩减。

样式封装（和样式泄漏）在Web上仍然是一个很大的问题，尤其是当Web应用程序和站点在其生命周期中变得越来越复杂时。

很快（希望），我们将拥有Shadow DOM功能in all browsers，直到那时需要某种形式的模块化CSS解决方案来正确封装样式。 Check out this article about it。

综上所述：

CSS模块提供模块化，可重用和跨浏览器的解决方案：

• 无冲突的风格
• 直接和清晰的样式依赖
• 避免全球范围

---

React，Angular和Vue在他们的构建链中使用他们自己的解决方案来解决这个问题。大多数现代MV *框架都以某种形式使用CSS模块。

---

当然，使用CSS模块的另一个好处是最初更复杂的方法来成功地抓取特定网页的内容。

Answer 2

Atlassian使用react-css-modules进行混淆并优化他的模板，原因很简单：

混淆的CSS类名==较小的包大小==通过网络传输的数据量较少。

显然，混淆类仅适用于生产版本而非开发阶段。

modules属性告诉Webpack需要对类名进行模糊处理。您可以在开发构建中将其设置为false，并且类名将与CSS文件中的名称保持一致。这对开发非常有用。来自How to obfuscate CSS class names with React and Webpack的文字。