Why are some single-use elements Classes instead of IDs in CSS?_问答_开发者

I know that in CSS Classes are typically resevered for elements that may be used multiple times on a page and IDs are for sing开发者_JAVA百科le-use elements. That being said, I have noticed where many people seem to call container/wrapper elements Classes instead of IDs eventhough their only used once on a page. Why is this? What am I missing?

For example: If you inspect the elements of this very page you'll find that the <body> tag is listed as a Class, as is the footwrap <div>. Most of the other elements are listed as IDs.

Thanks in advance.

Most of the times, the use of classes in elements that appear once in a page implies that I can use the same tag with differents sytles in different pages.

For example, I can assign one class to my body tag in the main page, and another class in secondary pages. The content and structure of the body can be the same, but has different style.

The only reason that I can think of off the top of my head is if the classes are global classes (not specific to any single page) and have the possibility of being used multiple times.

For example, someone might implement a class named .side-bar. On one page, they might only have a single instance of a side-bar, but on another page within their site, they might have two.

Otherwise, I'd assume that the developer didn't really think through how they were going to put the page together and just stuck everything in as classes.

ID is for labelling a unique element - ie, for targetting a specific element with Javascript. CLASS is for classifying things. The distinction has more to do with JS than CSS.

The main reason you'd see differences across sites is either because the author is misusing these attributes or because one or the other makes more sense in the context of their code and markup.

<img id="name_of_my_image" class="category_of_image">

There's no requirement that if a property is used only once on a single page that it must be an id rather than a class. However, in terms of both CSS and JavaScript performance, if you know the label will be used only once it is much better to use an id.

An acceptable use case though is if the site has a single CSS file, invoked on every page for caching reasons, and multiple types of pages that should behave similarly. For example, multiple pages with similar styles might be given classes in the body, so that you can stack these classes for various effects.

A made-up example:

<body class="article print-only mobile">

versus:

<body class="home print-only desktop">

versus:

<body class="home mobile logged-in">

In those cases you might want to use different properties in combination to achieve a desired effect.

There is an, IMO silly, idea promoted by tools like CSS lint that IDs are evil. I believe the basis of this opinion is people confusing specificity for the enemy whereas people like myself are of the opinion that it's selector count that's the enemy of maintainable CSS. I think there's also a difference of opinion between people who prefer a more layered approach like myself to a more mostly module/component-specific-only one.

For ten years now, I have never ever felt the urge or need to use !important. I'm currently working with a team that is awesome, but who follow the classes thing. They find occasional usage of !important necessary and acceptable.

I usually squash !important declarations on sight, rarely needing to actually fix anything as a result. I'm less comfortable doing that in a class-only codebase. This is a problem. Use IDs sparingly to define unique things including overrides for variations on themes in unique section contexts but I'm of the stance that yes, you should please use them. The critical thing is to never ever add more specificity than necessary. That's where people start making a mess and CSS selector arms races ensue where everybody's looking to make sure nobody breaks their stuff by accident. That's a lousy plan in general development but an especially bad one in CSS where you want to smell-check any time it seems necessary to use more than 2-3 selectors not counting stuff like > and +.