Эта практика теперь известна как «CSS-модули» и становится все более популярной благодаря популярности Webpack. Концепция состоит в том, чтобы преобразовать (хеш) CSS-селекторов в уникальные имена классов, чтобы убедиться, что между модулями не существует столкновений между стилями.
Модуль css-loader для Webpack имеет modules
, который позволяет эту функцию. Он обычно используется с React, где вы назначаете имена классов в своей разметке через объект JS, доступный при импорте файла CSS, например
import styles from './style.css
. Если этот файл CSS имеет селектор, например. .sidebar
, он применяется в разметке через
className={styles.sidebar} // JSX
. Webpack будет хешировать имя класса и селектор сопряжения для обеспечения уникальности.
Это будет продукт минимизации и сжатия. Это, несомненно, будет написано с человекочитаемыми идентификаторами и именами классов, но, как прокомментировал Zeta, они затем заменяются аббревиатурами для сохранения байтов. Такие вещи не имеют значения для среднего веб-сайта, но когда вы получаете миллионы просмотров страниц в минуту, все это считается.
Взгляните на разницу между развитием и production версии jQuery. Это пример результата минимизации и сжатия.