22/04/2022

Why Google use random ClassName

What is CSS Modules

OBSERVATION

Google often writes the most elegant and efficient codes and the company is one of the leading companies in the tech industry. Google makes the standard and software engineers often try to understand what Google does even though they do not really understand WHY. I define Acceptance without questioning as an inertia root in laziness and will keep questioning WHY throughout this article.

I haven’t had a chance to write a single line of code for Google yet. Therefore, my analysis might be wrong due to the lack of resources and experience. I will try my best to deliver the right information though. Moreover, if you work for Google or know the stuff well, please leave a comment so that all of us can learn from you

One day, I opened Chrome Dev Tools after searching Thanos and observed that the HTML CSS class name seems pretty random and not human-readable (vs. Traditional meaningful className)

Google Search Thanos result page

vs. Traditional

SEARCH …

To find the answer, I did many searches at Google and was able to conclude with a plausible answer to what & why Google does this

Renaming CSS class names at the compilation time using CSS-loader

CSS Module makes CSS modularized. In other words, CSS class names are automatically transformed into unique CSS class names and make them scoped.

• Unique scoped CSS class name ultimately increases the productivity while it prevents any unexpected Class Name clash

For example,

results a CSS class name in a format of

[path][name]__[local]--[hash:base64:5]

because of css-loader & localIndentNamehttps://medium.com/media/dca31f1753f22c9fa24661d818c303b8webpack.config.js

Benefit of css-loader & localIndentName

• Unique scoped CSS class name ultimately increases the productivity while it prevents any unexpected Class Name clash

Downside of css-loader & localIndentName

hash is appended to every CSS class name to make it unique and the attached hash inevitably increases the length of the CSS class name

• Long CSS class name is bad in terms of User Experiences because it increases the CSS bundle size and ultimately slow down page rendering

Bonus — localConvention;

You can style exported class names

By default, the export JSON keys mirrors the class names (i.e., asIs value)

asIs — Class names will be exported as-is

camelCase — Class names will be camelized, the original class name will not to be removed from the locals

camelCaseOnly — Class names will be camelized, the original class name will be removed from the locals

dashes — Only dashes in class names will be camelized

dashesOnly — Dashes in class names will be camelized, the original class name will be removed from the locals

Making the names short

Looking back to Google Search Thanos result page

bNg8RB , wYq63b … CSS class names are much shorter than the what we made previously

Simply put,

we could convert

[path][name]__[local]--[hash:base64:5]

to

[hash:base64:6]

• This will output 6 letter class names encoded with base64

Benefits of Short Class Names

• Short Class Names makes the smaller CSS bundle size

Shorter CSS class names --> smaller bundle size --> 
less amount of data to transfer over network

• In other words, shorter CSS class names cause faster rendering and enhanced user experience as less amount of data needs to transfer over network

Downside of Short Class Names

• possible class names collision because it’s only 6 letters
• If you feel unsafe to use only 6 letters, you are free to add more …

Conclusion

CSS Module makes the CSS the way it should be written:

• modular
• scoped
• yet still reusable

It looks ugly and seems like it’s impossible to debug CSS styling with “random class names.” But that’s not a valid concern for 2 reasons

• First, CSS class names are not intended to be beautiful; they are intended to apply styles to elements
• Second, As soon as there is a build step to do some processing on your stylesheet, it is a pain to debug. But we have sourcemaps which helps us to debug fast

CSS Module has many benefits in terms of optimization of user experiences and I highly recommend using CSS modules

Thank you for reading 🙂