0
Today I entered Developer Mode on a Google website from Chrome by pressing F12 and I noticed that the classes of divs are totally different compared to what you’ve seen before. Usually a name is defined as container, topbar, among others easy to understand, whether in English, Portuguese mainly or another language.
And in Google Drive this image way (picture below) that seem to have been generated with random letters, can anyone explain to me how it works? Whether there is a different way to generate CSS, whether they were randomly generated by the application (less likely), or whether there is a pattern. Explain why, maybe there’s a different way to render and personalize the elements on the page that you’ve never seen before.
If you are bad to see the image, follow text:
Attribute class worthwhile j-A j-A-Nj a-nf-A.
Maybe (and this is just a kick) the CSS has been minified to reduce its size (and consequently speed up the load and thus improve the overall performance of the page), using some process in which the full names of the classes have been replaced by abbreviations. A purely random name would create even smaller classes, but an abbreviation is a middle ground between size and ease of debugging (if that’s really an abbreviation).
– mgibsonbr
Thank you @mgibsonbr for the comment, if you find any example on how this process works I will be grateful.
– Giancarlo Abel Giulian
It’s kind of hard to find this information, since Google Drive is a proprietary system (it has no open source). Unless someone uses a similar output tool, and can identify what’s going on, I’m afraid there’s not much to answer that. Or do you want to know about the "minification" process in general? If so, I suggest taking a look at the question "Minified pages and processing for each request" and from there.
– mgibsonbr