css - Why do professional-made websites have odd #id and .class names?

Question

I noticed that facebook and gmail have really odd #id and .class names.

Do they obfuscate them on purpose? or does their IDE does it? It doesn't seem logical to have such unreadable names for development

for example - this is gmail's refresh button. It would be reasonable to have id/class as "refresh"

<div class="G-Ni J-J5-Ji" style="">
<div class="T-I J-J5-Ji nu T-I-ax7 L3" act="20" role="button" tabindex="0" style="-webkit-user-select: none;" data-tooltip="Refresh" aria-label="Refresh">
<div class="asa">
<span class="J-J5-Ji ask">&nbsp;</span><div class="asf T-I-J3 J-J5-Ji"></div></div></div></div>

and facebook's post button for status update

<button class="_42ft _42fu _11b selected _42g-" type="submit">Post</button>

on performance - does have shorter name really impact load times? it would seem it is (for a large page such as facebook or gmail) a couple of 100kb more, which with today broadband line is negligible for the time needed

on exception - twitter and pinterest have readable names

Answer 1

Update: CSS Modules

This practice is now known as "CSS Modules" and is becoming more widely adopted with the popularity of Webpack. The concept is to transform (hash) CSS selectors into unique class names, to ensure that there are no collisions of styles between modules.

The css-loader module for Webpack has a modules option which enables this feature. It is commonly used with React, where you assign class names in your markup via a JS object made available by importing the CSS file, e.g.

import styles from './style.css

If that CSS file has a selector, e.g. .sidebar, it is applied in the markup via

className={styles.sidebar} // JSX

Webpack will hash the class name and matcing selector to ensure uniqueness.

Original answer ↓

This would be a product of minification and compression. It would no doubt be written with human readable id and class names, but like Zeta has commented, these are then substituted with abbreviations to save bytes. Such things don't matter to the average website, but when you're getting billions of pageviews an minute, it all counts.

Take a look at the difference between the development and production versions of jQuery. This is an example of the result of minification and compression.