11

If you look at the source code of a website such as Facebook, you'll see many classes as such:

<div class="_cy6 _2s24"><div class="_4kny"><div class="uiToggle _8-a _1kj2 _4d1i _-57 _5-sk" id="u_0_8"><a data-hover="tooltip" data-tooltip-content="Quick Help" data-onclick="[[&quot;HelpLiteFlyoutBootloader&quot;,&quot;loadFlyout&quot;]]" class="_59fc" href="#" rel="toggle" role="button" data-tooltip-delay="500" aria-haspopup="true" aria-controls="u_0_7" aria-label="Help Center" data-testid="contextual_help_jewel_button"><div class="_59fb _tmz"></div></a><div id="u_0_7" class="__tw _8-b _tdb toggleTargetClosed uiToggleFlyout"><div class="beeperNub"></div><div id="fbHelpLiteFlyout"><div id="fbHelpLiteFlyoutLoading" class="_5uco"><img class="_26y2 img" src="https://www.facebook.com/rsrc.php/v3/yb/r/GsNJNwuI-UM.gif" alt="" width="16" height="11" /></div></div>

To the naked eye, they appear to be gibberishly named classes. However, I am unsure as to why they are obfuscated. I don't see a class named something as post with any meaningful classes on child elements. Is there a reason for this practice? I see many large websites such as Facebook conducting this pattern, and am unsure if there is a reason.

15

It's called minification. It makes the CSS files (and potentially Javascript files too) smaller, requiring less bandwidth to download. This can make a significant difference in performance, especially for wireless devices.

4
  • I'm aware of minification, but minification even changes the class names to gibberish?
    – 1234567
    Jun 17 '17 at 1:48
  • Well if your class name is facebook-header-panel-main-text-button and you shorten it to _af243 you've saved quite a bit of bandwidth, right?
    – John Wu
    Jun 17 '17 at 1:49
  • 2
    So when is it obsfucation, and when is it minification?
    – Ooker
    Jul 2 '17 at 4:44
  • 3
    @Ooker: The distinction is in the intent, not the specific process. But they often go hand in hand: obfuscation has no use for longer-than-minimal names if they're not supposed to be human readable anyway, and minification inherently enforces minimal name length which generally renders the data less human readable then it was. It's actually really hard to do one and completely avoid the other (minification without obfuscation would require retaining all the information in less data), or pointless (obfuscation without minification would just use longer names that don't mean anything anyway)
    – Flater
    May 14 '20 at 8:42
5

Another likely answer is that they use this to subvert adblockers.
These usually select elements for removal based on their css attributes, i.e.:
class="post promoted".
Obfuscating the css names makes it much harder to create these filters.
These names might also be randomly generated for every single page load, making it even harder to create filters.

1
1

It's likely a bit of both obfuscation and minification.

Given that Facebook is built with React as an SPA, there's probably very little benefit in minifying class names to save on bandwidth unless they are global classes physically reused in many components. Class names would likely be defined once, associated with a component that's downloaded once, then re-used in the SPA (when components are created in memory) as the user interacts with the web app.

0

This is not likely deliberate obfusticatian.

Through a combination of transpiling and minification you can end up with a page source in the browser which looks nothing like the original source code.

Not the answer you're looking for? Browse other questions tagged or ask your own question.