问题
I noticed in Jira, they have obfuscated the CSS classes, so they look odd and they are different on every page refresh:
<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">
...What is the motivation behind this, maybe to prevent crawlers or other security concerns? Is it a worthwhile practice for general app development?
回答1:
The main reason of obfuscated/scrambled CSS class names is the usage of CSS modules to provide style encapsulation and size reduction.
Style encapsulation (and style leakage) is still a great issue on the web, especially when web apps and sites becoming more-and-more complex over their lifetime.
Soon (hopefully), we'll have 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.
In summary:
CSS Modules provide modular, reusable, and cross-browser solutions for:
- Conflictless styles
- Direct and clear style dependencies
- Avoiding global scopes
React, Angular and Vue use their own solutions to this problem in their build-chain. Most modern MV* frameworks use CSS modules in some form.
And of course, one other benefit of using CSS modules is the initially more complex methods to successfully scrape the content of the specific web page.
回答2:
Atlassian use react-css-modules for obfuscate and optimize his template for a simple reason:
Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.
Obviously the obfuscate class is only on production build not on development stage.
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.
来源：https://stackoverflow.com/questions/50870666/css-class-names-in-atlassians-jira-are-obfuscated