Why Google use random ClassName

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

Google Search thanos result page

vs. Traditional

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 🙂

Photo by Goran Ivos on Unsplash

RELATED POST

Easy to Customize
10/05/2022

Digital Forensics | The Bug Bounty Balance

Criminals often use burner phones, these phones often are built with easier data retrieval methods, due to the lack of security software included. Modern Android phones, will have the latest Android Security patch, they also feature things like onboard encryption (especially Samsung phones).

7/05/2022

Click-Baiting – What is it and how to detect it.

Clickbait typically refers to the practice of writing sensationalized or misleading headlines [more]

7/05/2022

What is Doxxing? – An how to protect against it

It is when an internet user, with malicious intent discovers information about you and uses it in a negative way, often adding their own opinion or taking things out of context. They use this to potentially stalk or drive their victim offline.

  • _blank
  • ALL CATEGORIES
  • https://ackerworx.uk//d/2addicted.mp3
  • https://ackerworx.uk//d/2addicted.mp3
  • Bad Wings
  • The Glitch Mob
  • _blank
  • ALL CATEGORIES
  • https://ackerworx.uk//d/BW.mp3
  • https://ackerworx.uk//d/BW.mp3
  • _blank
  • ALL CATEGORIES
  • https://ackerworx.uk//d/addicted.mp3
  • https://ackerworx.uk//d/addicted.mp3
  • Ryder Remix
  • _blank
  • ALL CATEGORIES
  • https://ackerworx.uk//d/bw2.mp3
  • https://ackerworx.uk//d/bw2.mp3