How does Facebook and google randomize the html selector id and class names?

Question

For example,

<div class="_4-u2 _1qby focus_target _4-u8" id="rc.u_0_x"></div>

I'm sure the dev version would comprise human readable & contextual selector names.

I can understand the why part. For why, refer Why do professional-made websites have odd #id and .class names?

I'm trying to figure out the how part. Is there a npm package or js library that helps in randomizing the names to a prod version.

Answer 1

They're not random, but they are not fixed either. They're usually used for component identification or a result of compilation/optimization, and it's implementation-specific.

For instance, if I remember correctly, React has data-reactid attribute with a random number value on elements for component identification. Ractive.js has data-ractive attribute with a 32-character hash value on elements for CSS scoping purposes. The BEM CSS naming convention has a .block__element--modifier class name structure which can easily be condensed into a few characters.