Почему на профессиональных веб-сайтах есть нечетные имена #id и .class?

Я заметил, что в facebook и gmail есть действительно странные имена #id и .class.

Неужели они запутывают их нарочно? или делает их IDE? Кажется логичным иметь такие нечитаемые имена для разработки

например - это кнопка обновления gmail. Было бы разумно иметь id/class как "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>

и кнопка отправки Facebook для обновления статуса

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

по производительности - имеет ли более короткое имя действительно влияет время загрузки? казалось бы, это (для большой страницы, такой как facebook или gmail) еще пара 100kb, что сегодня широкополосная линия пренебрежимо мала для необходимого времени

для исключения - твиттер и pinterest имеют читаемые имена

Ответ 1

Обновление: CSS-модули

Эта практика теперь известна как "CSS-модули" и становится все более популярной благодаря популярности Webpack. Концепция состоит в том, чтобы преобразовать (хеш) CSS-селекторов в уникальные имена классов, чтобы убедиться, что между модулями нет конфликтов стилей.

css-loader module для Webpack имеет параметр modules, который позволяет эту функцию. Он обычно используется с React, где вы назначаете имена классов в своей разметке через объект JS, доступный при импорте файла CSS, например.

import styles from './style.css

Если этот файл CSS имеет селектор, например. .sidebar, он применяется в разметке через

className={styles.sidebar} // JSX

Webpack будет использовать хеширование имени класса и селектора для обеспечения уникальности.

Оригинальный ответ ↓

Это будет продукт минимизации и сжатия. Это, несомненно, будет написано с человекочитаемыми идентификаторами и именами классов, но, как прокомментировал Zeta, они затем заменяются аббревиатурами для сохранения байтов. Такие вещи не имеют значения для среднего веб-сайта, но когда вы получаете миллиарды просмотров страниц в минуту, все это считается.

Взгляните на разницу между development и production версии jQuery. Это пример результата минимизации и сжатия.

Ответ 2

Это происходит потому, что они компилируют свой код, я имею в виду, как google они пишут код в java и все остальные обрабатываются с помощью GWT то же самое о facebook они пишут с помощью C, а затем делают то же самое.