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
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
CSS Module makes CSS modularized. In other words, CSS class names are automatically transformed into unique CSS class names and make them scoped.
For example,
results a CSS class name in a format of
[path][name]__[local]--[hash:base64:5]
because of css-loader
& localIndentName
https://medium.com/media/dca31f1753f22c9fa24661d818c303b8webpack.config.js
css-loader
& localIndentName
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
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
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]
Shorter CSS class names --> smaller bundle size -->
less amount of data to transfer over network
CSS Module makes the CSS the way it should be written:
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
CSS Module has many benefits in terms of optimization of user experiences and I highly recommend using CSS modules
Thank you for reading 🙂