CSS class Atlassian 的 Jira 中的名称被混淆了

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

obfuscated/scrambled CSS class 名称的主要原因是 usage of CSS modules 提供 样式封装和大小缩减 。

样式封装（和样式泄漏）仍然是网络上的一个大问题，尤其是当网络应用程序和网站变得在他们的一生中越来越复杂。

很快 （希望如此），我们将有 Shadow DOM capabilities in all browsers, until then some form of modular CSS solution is needed to properly encapsulate styles. Check out this article about it.

总结：

CSS Modules provide modular, reusable, and cross-browser solutions for:

Conflictless styles

Direct and clear style dependencies

Avoiding global scopes

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

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

Answer 2

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

混淆 CSS class 名称 == 更小的包大小 == 更少通过网络传输的数据量.

显然混淆 class 仅在生产构建而不是开发阶段。

modules property tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development. Text from How to obfuscate CSS class names with React and Webpack.

CSS class Atlassian 的 Jira 中的名称被混淆了

CSS class names in Atlassian's Jira are obfuscated

javascript

css

obfuscation

jira