7

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.

12

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 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
  • 1
    So when is it obsfucation, and when is it minification? – Ooker Jul 2 '17 at 4:44
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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