CODEWITHSUNDEEP
htmlcsscss-selectors
Cheetah
Cheetah

Reputation: 14379

Using element IDs/class names over other CSS selectors

To what extend should I be attempting to use other CSS selectors instead of element IDs/class names or vice versa.

For instance: body > header nav ul+ul { ... } when I could just do #socialnav { ... } to achieve the same thing.

Example HTML code being (obviously there are headers with child navs elsewhere in the code):

<header>
    <nav>
        <ul>...</ul>
        <ul....</ul>
    </nav>
</header>

What is the consensus on this? I mean, I find it manageable doing it using CSS selectors, but is there a disadvantage?

Upvotes: 1

Views: 163

Answers (5)

Eric Bieller
Eric Bieller

Reputation: 173

Using IDs and Classes as selectors is much faster than using normal css selectors. Some also argue that you should ONLY use classes because they encourage reusability in your stylesheets.

Here's a really good article about Object Oriented CSS: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Upvotes: 0

Spudley
Spudley

Reputation: 168655

You should write your stylesheets as rule sets for your site.

  • If you are writing a style which is you want to to work with a single specific piece of content, then it is good practice to reference that element's ID.

  • If you are writing a style which is part of your general site look and feel, then it should be written to reference tagnames and/or classes as much as possible.

There will be times when the actual html code is such that it becomes hard to follow those rules, but if you try to stick to that in general then you'll be okay. You may also need to bend your rules if you need to support older browsers (cough, IE, cough) that don't support all the CSS features that you'd normally want to use.

So yes, I would say that the way you've done it in the question is the recommended approach.

Upvotes: 0

jmar777
jmar777

Reputation: 39649

Your first guiding principal should be to keep the markup semantic. Your markup above is a great example of this - you're using header, nav, and ul tags in semantically meaningful ways.

Your second guiding principal should be to maintain separation of concerns (e.g., content and presentation). If adding a class names or id's to your markup does nothing for you semantically and you're able to craft CSS selectors w/out them, then you should avoid adding extra noise to the markup.

Sometimes, however, class names and id's are very useful (not just in CSS but also in JavaScript), so they have their place. Just don't resort to them if they're unneeded and are therefore adding unnecessary clutter to your markup.

Upvotes: 5

Rob W
Rob W

Reputation: 348972

It's up to your preferences.

I find it not wise to use body > header nav ul+ul, because a small change in your document structure, and you have to rewrite the CSS selector.

Use .classselectors and #id-selectors for elements which aren't an incredible important part of the main document, and use #one-special-item > ul > li > a:hover span to select the more specific elements.

Upvotes: 1

Curtis
Curtis

Reputation: 103348

Generally I try and avoid ID selectors in CSS.

I find it a lot easier to deal with classes than using IDs.

IDs can cause issues later on down the line if the markup is used in a Server-Side application, such as ASP.NET, where the IDs are rendered as something different to how they display in the markup.

However, ID selectors do take priority over class selectors:

http://jsfiddle.net/wcLrF/

Upvotes: 0

Related Questions