Why Do Professional-Made Websites Have Odd #Id and .Class Names

Why do professional-made websites have odd #id and .class names?

Update: CSS Modules

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.

The css-loader module for Webpack has a modules 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.

import styles from './style.css

If that CSS file has a selector, e.g. .sidebar, it is applied in the markup via

className={styles.sidebar} // JSX

Webpack will hash the class name and matcing selector to ensure uniqueness.

Original answer ↓

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.

Take a look at the difference between the development and production versions of jQuery. This is an example of the result of minification and compression.

How the big website('s company) name their HTML classes

They use meaningful class names in the source code, but then use a preprocessor/compiler/bundler (such as webpack) to convert the class names to short ones in order to make things smaller.

Of course those few bytes are not much, but if you get billions or trillions of requests every month, it starts summing up.

Why is my CSS style not being applied?

Have you tried forcing the selectors to be in the front of the class?

p span label.fancify {

    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic;
}

Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:

<div id="first">
    <p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>

You would style it like this:

div#first p#myParagraph {
     color : #ff0000;
}

Just to make a complete example using a class:

div#first p#myParagraph span.bolder{
    font-weight:900;
}

For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html

CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/

Standards for HTML layout element class names?

I don't think there is an absolute standard, since no two websites are the same.

Allright, some are, but that's not the point. :)

Anyway, since the CSS is made specifically to markup that single website, you can't actually decouple it in such detail. You won't find some ready made CSS sheets that you can just plugin your website to place all those navigation containers.

I think the best way is to come up with a standard for yourself and stick to it. I hope you would be able to find better names than the often used but quite abstract 'container'. And maybe, some day, it will become the defacto standard.

How can I style even and odd elements?

Demo: http://jsfiddle.net/thirtydot/K3TuN/1323/

li {

    color: black;

}

li:nth-child(odd) {

    color: #777;

}

li:nth-child(even) {

    color: blue;

}

<ul>

    <li>ho</li>

    <li>ho</li>

    <li>ho</li>

    <li>ho</li>

    <li>ho</li>

</ul>

---

Related Topics