What are randomly generated class names called?

Viewed 1056

Something I see a lot of sites doing is making class names seem random. I'm sure they're not really random in the backend, but looking at the names of classes in the front end, it would appear that way. Some sites doing this:

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

Here's an example:

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

How is this being accomplished?

2 Answers

In front-end development, it is common to use a CSS naming convention like BEM to name CSS classes and IDs in a descriptive standard. These CSS classes can be rather long, depending on the names of parent elements and whatnot. I have seen CSS classes ~40 characters long in developer code. For large enough web-apps, they are scattered throughout the code. These extra characters increase the size of the CSS, HTML, JS, etc files (by a considerable amount for a large enough application).

As part of a "production" build, frameworks like Angular "minify" and "uglify" the code to make it have a smaller footprint. By removing whitespace, changing variable names, function names, CSS names, etc, the size of the code that a user needs to download/cache is reduced dramatically. I can't speak to exactly what Google and Toptal are doing, but they are both using Angular, so they are probably utilizing this angular-cli production mode build to reduce the footprint. The same can also be accomplished with css-loader via Webpack, if I recall correctly.

It is accomplished by just choosing the way they want to name their classes. You can have your own naming convention for your website the same way..

Some of these naming conventions can be so that classes have short "random like" names, which (for that company's choosing) represent (or ate mapped to) specific values, for example _x1 might signify class otherwise written more descriptively as NavigationBarSpecialBackgroudProperties

This is mostly used for pages that are built with build tools, which tools take care of mapping those "HumanReadable" class names, and map them to something short so that the overall size of the web page's output HTML is smaller, which saves bandwidth if that page is being open mission times a day.

Every Company or Dev team decides that for themselves basically.

Related