1

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?

Improve this question
2
  • 2
    #elementid is a CSS selector. Commented Sep 20, 2011 at 16:09
  • Yeah sorry, my bad...poorly worded title/question. Commented Sep 20, 2011 at 16:13

5 Answers 5

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

0

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/

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.