Why use a class instead of an explicit id?

Many quality web sites is to use only classes instead of id, although on the page so only one element. For example, the same wrapper, header, sidebar, anywhere classes. Why id is not used? Thank you.
September 19th 19 at 12:11

Related questions

More answers about "Why use a class instead of an explicit id?"
4 answers
September 19th 19 at 12:15
for of the monotony
today one, tomorrow two, the day after tomorrow 10
No, well, it's not about the basic elements... - Melisa.Carro commented on September 19th 19 at 12:18
What? Why do you treat them in a special way, so as with all. This slightly reduces the overall complexity of the project. - Orrin commented on September 19th 19 at 12:21
: OK ) - lyda_Dickins commented on September 19th 19 at 12:24
September 19th 19 at 12:13
Solution
there are a few points:
1. id has a very high priority css. to explain in two words is hard, but briefly, if you set some properties for the id-selector #x, whatever you write in a class selector .yif it pulls the styles from the id-selector, they will take precedence over the class selector. No items should have priority over others. Which is easier to edit styles.
2. There is an unwritten "laws" of BEM, followed by experienced developers. There are many philosophies BEM, the most popular - yandeksovsky - Google. BEM allows you to better understand your code to work with preprocessors and to make more convenient operation when working in js.
...well, there are a few moments.

The main difference from the id class that styles id have to ask for a single item is unique. A class can be applied to multiple elements. Even if the development of block one, you never know, you may have to add about the same unit anywhere else on the page - in this case, the id cannot be duplicated - error css.

In General, comrades, id never use! Class is much more convenient and more flexible (at least in the sense that one element can be set at least 255 classes). Invented CSS selectors in the late 90s. Then the HTML was on a completely different level, and the developers looked the other way. They then wanted to manipulate the DOM with JS method GetElementByID, now this method in its pure form nobody uses. There are jQuery!
I'm certainly not asked to explain the difference between css and id, but still for work thanks. I realized that with js to work with it easier and in fact can be multiple header and footer from the article for example. Ugh, just as I had not thought of =) - Melisa.Carro commented on September 19th 19 at 12:16
Very funny. No one is using. You number is also on the jQuery stack up? Or native JS too complicated? ahahha - Orrin commented on September 19th 19 at 12:19
I know JS, I was taught, when Jquery was not. But today 98 out of 100 scripts I write in jQuery. Of course, put in the number, using the syntax of js, but in the overwhelming number of cases occur, these operations are already inside the jQuery designs. And I would advise not to philosophize. If you understood what I meant originally, the wording cling is not necessary. You are the smartest here. Such clever as you here very much. - lyda_Dickins commented on September 19th 19 at 12:22
: use ID in js is also recommended only in very extreme cases where without it in any way and you are 100% sure that the item is unique. Usually it's some kind Popover or controls generated from JS. Otherwise it is better to tie to the classes and data-* attributes. - lucas.Sau commented on September 19th 19 at 12:25
: I am not showing off, not saying that is the smartest. But don't try to be clever and say that no one is using native JS. - Orrin commented on September 19th 19 at 12:28
if you were smart enough you would have noticed that I never wrote, "no one uses native JS". I wrote that nobody uses the native JS method GetElementByID, instead all use much more convenient jQuery('selector'). Read carefully, please, before you try to be clever. - lyda_Dickins commented on September 19th 19 at 12:31
September 19th 19 at 12:17
id is a unique identifier intended for JS rather than CSS, for example in the catalogue each product is a kind
the <ul>
<li id="1" class="product"></li>
<li id="2" class="product"></li>
<li id="3" class="product"></li>
<li id="4" class="product"></li>
<li id="5" class="product"></li>
<li id="6" class="product"></li>
</ul>

where, with the help of the class, we set all elements of the same type, and when you click on the buy button, send the product id to the cart
September 19th 19 at 12:19
And why in PHP and Js has no static typing?
In fact, the fundamental roots are the same. Web developers used to the constant mess and chaos in their products. You never know how tomorrow will be such elements on the page even if he is one. Here you have #popup. Tomorrow the customer asks to add a pop-up form and you quickly insert another #popup... It ends the implicit problems.
If the browser is seeing the duplicate id "fell" would be refusing to display the page and throw the exception, there would be no problems. But developed browsers try to display the page at all costs, to ignore the duplicates id, to close the non-closed tags, etc.
This makes such errors are elusive and developers must write code that would have minimized the possibility of their occurrence.
The entire web industry is an example of bad code, and not because there are no good developers. They are quite enough. But the ideology of the web is that makes you create gonoreiny.
There are no standards, and those that are not respected. The code in the solution is in a state of permanent development and refactoring directly in production. The developers in the projects often change each other. And with all of the requirements for the functioning and occasionalist very hard - error causes problems on many machines for many users.
The result of this exactly what we have.

Find more questions by tags Web DevelopmentCSS