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="[["HelpLiteFlyoutBootloader","loadFlyout"]]" 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.
Best Answer
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.