1

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?

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
williamthomas
  • 105
  • 1
  • 10
  • They probably need unique class names. I would never use this. Just name stuff semantically. – Sebastian Simon Jun 15 '18 at 07:10
  • 1
    they classnames are different every time the content is loaded/changed. theres significant work in doing that just to ensure distinct class names surely! – williamthomas Jun 15 '18 at 07:17
  • 3
    They probably use something like `css modules` (https://github.com/css-modules/css-modules), it's essentially writing scoped CSS. Think react components with specific CSS. – woutr_be Jun 15 '18 at 07:24
  • The randomized class names came from some sort of **CSS modularization**. Great for encapsulated styles and compressed sizes. – user7637745 Jun 15 '18 at 08:17
  • Our company uses a browser extension to try and fill in some gaps and jira doesn't provide. This is going to make it tough – NSjonas Aug 30 '18 at 02:06

2 Answers2

3

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.

user7637745
  • 965
  • 2
  • 14
  • 27
0

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.

Andreacw5
  • 17
  • 1
  • 6