StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h3>Update: CSS Modules</h3> <p>This practice is now known as "CSS Modules" and is becoming more widely adopted with the popularity of Webpack. The concept is to transform (hash) CSS selectors into unique class names, to ensure that there are no collisions of styles between modules.</p> <p>The <a href="https://github.com/webpack-contrib/css-loader#css-modules" rel="noreferrer">css-loader module</a> for Webpack has a <code>modules</code> option which enables this feature. It is commonly used with React, where you assign class names in your markup via a JS object made available by importing the CSS file, e.g.</p> <pre><code>import styles from './style.css </code></pre> <p>If that CSS file has a selector, e.g. <code>.sidebar</code>, it is applied in the markup via</p> <pre><code>className={styles.sidebar} // JSX </code></pre> <p>Webpack will hash the class name and matcing selector to ensure uniqueness.</p> <h3>Original answer ↓</h3> <p>This would be a product of minification and compression. It would no doubt be written with human readable id and class names, but like Zeta has commented, these are then substituted with abbreviations to save bytes. Such things don't matter to the average website, but when you're getting billions of pageviews an minute, it all counts.</p> <p>Take a look at the difference between the <a href="http://code.jquery.com/jquery-1.9.1.js" rel="noreferrer">development</a> and <a href="http://code.jquery.com/jquery-1.9.1.min.js" rel="noreferrer">production</a> versions of jQuery. This is an example of the result of minification and compression.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload