2

I frequently hear that I should not use id attributes on the HTML elements for styling purposes in CSS. However is this always the case? Let say you have multiple lists in your application (ul) that have a class horizontal-list. However you want to apply some unique styling for each ul can you then add an id and use it like this?

#food .horizontal-list {

}

#food .horizontal-list li {

}

Here you only use it to separate the elements. Or are you supposed to make a class instead for each unique list. Does "Don't use id's for styling purposes` only apply if you use it like this?

#food {
    /* loads of attributes */
}

Could someone explain when it is okay to use id's?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
LuckyLuke
  • 47,771
  • 85
  • 270
  • 434
  • 5
    The examples you give are perfectly fine. It's OK to use IDs in CSS. If it wasn't, what's the point of having ID selectors in the first place? I maintain the stand that whoever wrote CSS Lint only did it to be "that guy". – BoltClock Apr 19 '12 at 19:41
  • Then people should take a visit to the JavaScript room and talk to many of the screamers. – LuckyLuke Apr 19 '12 at 20:34

5 Answers5

7

I thought this well stated from the article CSS Lint is harmful

ID’s are extremely useful and you absolutely should use them. They are the fastest way a browser can select a given element. They are useful for in-page anchoring and if they’re already there in the markup then use them as style hooks. They are also, oddly enough, perfectly correct to use as long as they’re only ever one instance of that ID on any given page.

Arguments about “selector specificity” are at best a stretch to justify a bad rule. Author your CSS properly and you won’t fall into any specificity traps. I can count on my hand the number of times that’s been a problem for me in 6 years of coding CSS and HTML for a living on various different types and scales of website.

The only time this rule could be called accurate is if you are using ID’s to style a specific chunk of HTML with intent to allow its use anywhere on the site. e.g., if you’re using it to style a HTML gallery widget that a user can include on any page via their CMS. They may specify more than one on a page. But, that’s the one and only time it’s a concern.

The way you have it in your example is correct and it is ok to declare it multiple times in your css, you just dont want to use an id multiple time on elements.

Zac
  • 12,637
  • 21
  • 74
  • 122
  • 1
    I'd just tweeted that article not many minutes ago. It's an excellent read. I can't fathom why people get so worked up about ID selectors. – BoltClock Apr 19 '12 at 19:51
1

Both ID's and classes are perfectly fine to use for CSS styling.

  • Use ID's for unique elements. In other words, each ID should not be used more than once.
  • Use classes for categorization and labeling of elements. More details: Best Practices for HTML/CSS
Community
  • 1
  • 1
Alp
  • 29,274
  • 27
  • 120
  • 198
1

From http://webdesign.about.com/cs/css/qt/tipcssclassvsid.htm

Use a class tag if:

  1. The style is used in various places throughout the document.
  2. The style is very general.

Use an id tag if:

  1. The style is only used once ever in the document.
  2. The style is specific to a certain area of the document.

Remember that an id can only appear once in any HTML document. Once you've used the id, it should not be used again on that page.

There is a longer explanation at http://css-tricks.com/the-difference-between-id-and-class/

Michael Tucker
  • 143
  • 6
0

you should have a base class for basic layout and other classes for additional changes to it. ids should only be used if you need to reference an element, e.g. for ajax requests or forms. using multiple classes is no problem and makes changes easier.

also remember: using an id twice causes invalid markup.

Hajo
  • 849
  • 6
  • 21
0

id's are used to style a particular element, like in your example. Its perfect to use IDs where you need to restrict style to a particular element only

Habib
  • 219,104
  • 29
  • 407
  • 436