Question

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?

Answer 1

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.