Random characters in CSS class names

Question

I have noticed one thing. On some sites such as tray.io, asana, fb etc They have random characters in css class names when you inspect them for example:

<header class="Header_XSDsdksdXKkSDD">..</Header>

Why are these characters generated and how are they generated?

Thanks.

Answer 1

These are probably hash string of a technology similar to CSS Modules.

The main idea is that you use a tool that reads the CSS files and makes unique classes for your different "views". Doing this separates the CSS files per HTML file / template / JSX or whatever your setup is.

If you follow the idea behind it, you can easily achieve more scalable setup of your code, because it allows you to use global and local class names. This means that you will not rely on the "cascading" feature of the CSS to propagate any styles.