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.

4 Answers 4


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.

  • I'm aware of minification, but minification even changes the class names to gibberish?
    – 1234567
    Commented Jun 17, 2017 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
    Commented Jun 17, 2017 at 1:49
  • 2
    So when is it obsfucation, and when is it minification?
    – Ooker
    Commented Jul 2, 2017 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
    Commented May 14, 2020 at 8:42
  • Considering that they do responsive by literally deleting elements from existence (because CSS is for weaklings I guess) and place elements on the page with absolute positioning and margins, I'd argue that utter incompetence at HTML/CSS likely plays a part.
    – Ariane
    Commented Oct 7, 2022 at 0:49

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.


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.


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.