3

So I often use a website LiveWeave.com to test HTML, CSS, and JavaScript code that I've written. It has a syntax checker, and whenever I use an ID as a selector in the CSS section, it says that it is improper to use an ID as a selector.

I have demonstrated it in this Weaver. To the right of line three in the CSS window is a yellow icon, which, when hovered over, says that it is improper to use IDs as a selector. I was under the impression that that is specifically for the purpose of being used as a selector for a single DOM element, as opposed to classes, which are designed to be applied to multiple DOM elements.

Am I wrong? IS it improper to use an ID as a selector?

The only other instance I can think of an ID being used is for JavaScript document.getElementById(), and similar functions. What is the proper use of an ID? Note that I am NOT asking the difference between an ID and a Class, but rather whether it is proper to use an ID as a selector.

  • "CSS doesn't care" https://css-tricks.com/the-difference-between-id-and-class/ (this guy knows his stuff) – Popnoodles Jul 17 '15 at 01:52
  • @Rob thanks for the comment. –  Jul 17 '15 at 01:52
  • 1
    The reason for this is that it's unique for that element only. (Id's are unique and should never duplicate on the same page) so that stacks more css weight. Using classes makes it more flexible. though sometimes you need just that id element to be slightly different. Go for it and don't mind errors/cautions. – EasyBB Jul 17 '15 at 01:54
  • Also see http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left – Lucien Stals Jul 17 '15 at 02:00
  • Your `document.getElementById()` is actually Javascript using the ID as a selector, not CSS. That's actually a (slightly) different issue. – Lucien Stals Jul 17 '15 at 02:10
  • @LucienStals I know. I was saying that it's the only other instance I can think of that an ID might be used (and Javascript functions similar to it). –  Jul 17 '15 at 02:13

6 Answers6

2

Using an ID is the most efficient way of selecting a DOM node in both CSS and Javascript. I personally like to use classes for all repeated items and ids for unique items, or unique configurations of repeated modules. There are many CSS patterns, I use a style called BEM (Block, Element, Modifier as seen here) which is a class based naming convention. Look at your favorite websites, right click or inspect. You will find that there is no one right answer to your question, only many right answers.

May I also say that both exist in the standard for a reason and serve a purpose depending on your applications needs.

Below is the order of efficiency for selectors. IDs 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...

AlphaG33k
  • 1,588
  • 1
  • 12
  • 24
  • I don't think an ID is any more efficient than a class; or anything more than a marginal amount. – justinw Jul 17 '15 at 02:01
  • 1
    It is if your accessing it like everyone else, usually inside of some loop or looped function like $.each, for etc. – AlphaG33k Jul 17 '15 at 02:02
  • I actual misread that, you're right - sorry about that. – justinw Jul 17 '15 at 02:05
  • @AlphaG33k your answer assumes Javascript is involved (and on the web it probably will be), but the OP specifically asked about CSS. As I understand CSS, ID's are not necessarily the most efficient selector. – Lucien Stals Jul 17 '15 at 02:06
  • They are also the most efficient in CSS as well, they do not need to be qualified. It is a matter of fact that .container > .list .item is less efficient than writing #item-23. I can also only think that this exact same specificity translates to increased performance in regards to the CSS engine as well. http://www.vanseodesign.com/css/css-selector-performance/ is a study, listing ID as the number 1 most efficient way of selecting an element in CSS out of 9 different ways – AlphaG33k Jul 17 '15 at 02:10
  • Today's modern browser CSS engines are extremely fast, performance is not an issue. Don't use ID's for performance. Use them for organizational clarity. – Elegant.Scripting Jul 17 '15 at 02:13
  • @AlphaG33k again, this is a question directed toward CSS. Not JavaScript. Using a couple of sibling and class selectors won't hinder performance by more than a 10th of a second, even on a terrible phone. Once the HTML and CSS files are in the browser, the processing power required is almost nothing. – Elegant.Scripting Jul 17 '15 at 02:24
  • Performance is performance and that link has nothing to do with javascript, are you able to provide anything to the contrary or are your just disagreeing for fun? – AlphaG33k Jul 17 '15 at 02:28
  • @BikasVaibhav if you have a page (or collection of pages) of that size and you are using ID's as a primary selector, your load times will be even larger due to file sizes alone. Also, CSS should be versatile, and in little cases extremely specific, to allow for code to be reusable and enable faster prototyping. Again, even in a situation like this you'd be waiting on network, not CSS processing. Performance still remains fast in browsers. – Elegant.Scripting Jul 17 '15 at 02:34
2

It is not improper to use ID's as selectors, so long as the ID being used corresponds to only one element in the DOM (document object model).

If you'd like a selector that is multi-purpose, and able to be applied to multiple elements in the DOM, use a class. Although I'm sure you knew that.

The main reason ID's are frowned upon by some CSS developers, and full stack designers, is simply because they aren't as versatile and they have a higher specificity than classes, which can either help or hinder development (based on CSS knowledge).

For more information on CSS specificity, read here: https://css-tricks.com/specifics-on-css-specificity/

Elegant.Scripting
  • 757
  • 4
  • 10
  • 28
  • that's how Ids are designed to be used; for one object. Give multiple element in the DOM the same ID, and then try document.getElementById(), and it'll only pull the first element with that Id, because it's only expecting one element. –  Jul 17 '15 at 01:55
  • @Mr.Chameleon You asked for CSS, not JavaScript, in your original question. – Elegant.Scripting Jul 17 '15 at 02:15
1

It's valid, it's just considered bad practice by some developers because it can make it difficult to maintain your CSS if you're not disciplined about it. I'm no expert on CSS but I'm pretty sure it's all to do with #'s having a really high specificity rating and if you have them dotted around your CSS files it makes it difficult to manage the cascade i.e. inheritance of style rules. So it's considered best by some to use IDs only for referencing elements in your JavaScript.

Matt Herbstritt
  • 4,754
  • 4
  • 25
  • 31
  • 2
    Using IDs is not bad practice, nor does it make CSS difficult to maintain. The high specificity of IDs is a feature, not a fault. – Rob Jul 17 '15 at 01:54
  • Please provide link to a style guide or article that declares using ID selectors as "bad practice". Makes no sense – charlietfl Jul 17 '15 at 01:55
  • I agree. I use them all the time because of their high specificity. –  Jul 17 '15 at 01:56
  • 1
    Just google it and you'll find plenty of discussion on both sides. Like most things it just boils down to opinion. – Matt Herbstritt Jul 17 '15 at 01:58
0

I've actually heard this argument before.

Some people push the idea of using solely classes for pure css stuff and keeping id for javascript and other id specific functionality.

It would seem that website follows that ideology, so they are trying to get their users to adopt it. I'm not sure if it is yet best practice to keep id out of css

You can decide for yourself whether an id is worth using, when you could just use a class instead.

justinw
  • 3,856
  • 5
  • 26
  • 41
0

On top of what has already been mentioned, even in CSS, ID's can be useful depending on what is the structural design.

For example; if every page in your website requires a header and a footer, I don't see why it would not be useful to make it an id.
What is wrong with doing: 

#header {}
#footer {}

If you know for sure that your page has only one header and one footer, I don't see the point in using a class.
Mentioning the id is very specific and the page structure is undubious in this case.

Moreover, I also don't see what is wrong by doing something for example like: 

.menu{}
#header .menu li{}
#footer .menu li{}

To add specific styling depending on the page segment. Seems very legit to me.

Ultimately, I even think that using ID's to indicate page sections might be more beneficial by ´knowing´ that they are unique (although they might be recurrent across different pages).
Reading an id in a CSS file should give the CSS designer the benefit of immediately knowing what page segment the following css rules are referring to.
A sheet with only classes would in that case seem less clear than using ID's imo.

html_programmer
  • 18,126
  • 18
  • 85
  • 158
0

If you used an ID as a selector and your using it in your Javascript too then you could make situation where if you decide to rename it then you've created a dependency that wouldn't be there if you had used a class name in your CSS.

Also, though using the ID is faster, it isn't faster if you then use #text a - since CSS reads right to left and has to check all the anchor elements first and then find the one with the ID of #text.

This also means the style isn't reusable and you can't use multiple classes either.

So I think the answer really is, based on all the pros and cons of using an ID as the selector, the best practice to keep you out of possible future problems is to not do it. Of course, this all really depends on how you code, the scope of the project and how many other people are working in the project. It's not against the rules, just not really best practice due to possible issues you might be building in that could bite you later.

becoop
  • 36
  • 1