Как называются случайно сгенерированные имена классов?

Question

Я вижу, что многие сайты делают имена классов случайными. Я уверен, что они не совсем случайны в бэкэнде, но если посмотреть на имена классов в интерфейсе, это будет выглядеть так. Некоторые сайты делают это:

https://google.com https://toptal.com

Вот пример:

<div class="_1bjWP7av"></div>

Как это это достигается?

Answer 1

В интерфейсной разработке обычно используется соглашение об именовании CSS, например BEM , для именования CSS классов и идентификаторов в описательном стандарте. Эти CSS классы могут быть довольно длинными, в зависимости от имен родительских элементов и еще много чего. Я видел CSS классов ~ 40 символов в коде разработчика. Для достаточно больших веб-приложений они разбросаны по всему коду. Эти дополнительные символы увеличивают размер файлов CSS, HTML, JS, et c (в значительной степени для достаточно большого приложения).

Как часть "производства" build, фреймворки типа Angular «минимизируют» и «убирают» код, чтобы сделать его меньшим по размеру. Удаляя пробелы, изменяя имена переменных, имена функций, CSS имена и т. Д. c, размер кода, который требуется пользователю для загрузки / кэширования, значительно сокращается. Я не могу точно сказать, что делают Google и Toptal, но они оба используют Angular, поэтому они, вероятно, используют эту производственную сборку angular -cli, чтобы уменьшить занимаемую площадь. То же самое можно сделать с помощью css -loader через Webpack, если я правильно помню.

Answer 2

Это достигается просто путем выбора способа, которым они хотят назвать свои классы. Вы можете иметь свое собственное соглашение об именах для своего веб-сайта таким же образом.

Некоторые из этих соглашений об именах могут быть такими, чтобы у классов были короткие «случайные как» имена, которые (по выбору этой компании) представляют (или ели) сопоставлены с) заданными c значениями, например _x1 может означать класс, иначе записанный более информативно как NavigationBarSpecialBackgroudProperties

Это в основном используется для страниц, созданных с помощью инструментов компоновки, которые обрабатывают отображение эти имена классов «HumanReadable», и сопоставьте их с чем-то коротким, чтобы общий размер вывода веб-страницы HTML был меньше, что экономит пропускную способность, если эта страница открыта для миссии раз в день.

Каждый Компания или команда разработчиков решают это для себя в основном.