Is it wrong to use ID as a CSS selector?
Therefore, I often use the LiveWeave.com website to validate the HTML, CSS, and JavaScript code I wrote. It has syntax checking, and whenever I use an ID as a selector in a CSS section, it says that using an ID as a selector is wrong.
I have demonstrated this in this Weaver . To the right of line three in the CSS window is a yellow icon that, when it hovers, says it is wrong to use IDs as a selector. I was under the impression that this is specifically for use as a selector for a single DOM element, as opposed to classes that are designed to be applied to multiple DOM elements.
Am I wrong? Is it wrong to use an identifier as a selector?
The only other instance I can think of for the identifier being used is JavaScript document.getElementById()
and similar functions. What is the proper use of an identifier? Please note that I am NOT specifying the difference between ID and class, but rather whether ID should be used as a selector.
source to share
Using an ID is the most efficient way to select a DOM node in CSS and Javascript. I personally like to use classes for all repeating elements and IDs for unique elements or unique configurations of repeating modules. There are many CSS templates out there, I use a style called BEM (Block, Element, Modifier as shown here ) which is a class based naming convention. Take a look at your favorite sites, right click or check. You will find that there is not one correct answer to your question, only many correct answers.
May I also say that both exist in the standard for a reason and serve a purpose depending on the needs of your applications.
Below is the order of efficiency for selectors. Identifiers are the most efficient, and pseudo-classes and pseudo-elements are the least efficient.
id (#myid)
class (.myclass)
tag (div, h1, p)
adjacent sibling (h1 + p)
child (ul > li)
descendent (li a)
universal (*)
attribute (a[rel="external"])
pseudo-class and pseudo element (a:hover, li:first)
See here ...
source to share
It is wrong to use ID as selectors if the ID used matches only one element in the DOM (Document Object Model).
If you want a selector to be multipurpose and can be applied to multiple DOM elements, use the. Although I'm sure you knew that.
The Root Cause ID is frowned upon by some CSS and full stack developers, simply because they are not as generic and have higher specificity than classes that can either help or hinder development (based on CSS knowledge).
Read more about CSS specificity here: https://css-tricks.com/specifics-on-css-specificity/
source to share
It is indeed true that some developers considered this to be bad practice because it can make it difficult to maintain CSS if you are not disciplined. I'm not a CSS expert, but I'm sure this is all due to the fact that I have a very high specificity rating, and if you sprinkle them around your CSS files, it makes it difficult to manage the cascading style rules. Therefore, it is best to only use IDs for element references in your JavaScript.
source to share
I've actually heard this argument before.
Some people are pushing the idea of using class
es exclusively for pure css stuff and keeping it id
for javascript and other id
specific functions.
It would seem that the site follows this ideology, so they are trying to get their users to accept it. I'm not sure which is even better to use id
from css
You can decide for yourself whether to use id
if you can just use class
.
source to share
In addition to what has already been mentioned, even in CSS, an identifier can be useful depending on what the structural design is.
For example; if every page on your site requires a header and footer, I don't see why it would be inappropriate to make it an id.
What's wrong:
#header {}
#footer {}
If you know for sure that your page only has one header and one footer, then I see no point in using the class.
The mention of the identifier is very specific, and the structure of the page in this case is unreasonable.
Also, I also can't see what is wrong by doing something like:
.menu{}
#header .menu li{}
#footer .menu li{}
To add a specific style depending on the segment of the page. Seems very legal to me.
Ultimately, I even think that using an identifier to indicate sections of a page might be more useful due to the "knowledge" that they are unique (although they may be repeated across pages). Reading the ID in the CSS file should give the CSS developer the advantage of immediately knowing which segment of the page the following CSS rules are referring to. A sheet with only classes will be less clear in this case than using the imo ID.
source to share
If you have used an ID as a selector and are using it in your Javascript, then you can make a situation where if you decide to rename it, you have created a dependency that would not be there if you used the class name in your CSS.
Also, while using an ID is faster, it's not that fast if you then use #text a - since the CSS is read from right to left and must first check all anchor elements and then find the one that has the ID # text.
This also means that the style cannot be reused and you cannot use multiple classes.
So, I think the answer is actually based on all the pros and cons of using an ID as a selector. The best practice for avoiding potential future problems is not to. Of course, it all depends on how you code, the scale of the project, and how many other people are working on the project. It's not against the rules, it's just not good practice because of the potential problems you might build that might bite you later.
source to share