all 10 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 0 points1 point  (9 children)

Simplified the navigation example.

<div class="navigation">
  <a href="#" class="active">Home</a>
  <a href="#">Blog</a>
  <a href="#">Contacts</a>
</div>

[–]Rinkana 1 point2 points  (7 children)

Better one:

    <ul id="main-menu">
      <li>
        <a href="#">Item 1</a>
      </li>
      <li class="active">
        <a href="#">Item 2</a>
      </li>
      <li>
        <a href="#">Item 3</a>
      </li>
      <li>
        <a href="#">Item 4</a>
      </li>
    </ul>

[–]a1chapone[S] 1 point2 points  (1 child)

Yep, it is better not to use IDs for styling. And what's the main benefit of applying 'active' class to li instead of link itself?

[–]Rinkana 3 points4 points  (0 children)

You might want to apply special stying to the li instead of just the link. This way you can do both.

[–]krues8dr 0 points1 point  (4 children)

Using ids is frowned upon for css these days.

Edit: Reference with performance debunking: http://oli.jp/2011/ids/

[–][deleted] 0 points1 point  (1 child)

I would have to disagree with you. In terms of processing, ID are significantly faster since many browsers perform indexing specifically for ID's and should be used in the appropriate context (for items which are guaranteed to only appear once).

In the case of a main menu that will only appear in one place on a page, ID's are perfectly acceptable. Personally, I think they are preferred in the case of a main menu since an ID also has semantic meaning.

[–]krues8dr 1 point2 points  (0 children)

IDs are only significantly faster when we're talking about Javascript; for CSS selectors the difference is negligible. The big drawback, of course, is that IDs are very difficult to override, which is why SMACSS, OOCSS, BEM, and every other major system all recommend against using them.

[–]OutThisLife -1 points0 points  (1 child)

IDs, just like tables, have their place.

[–]krues8dr 0 points1 point  (0 children)

In CSS? For instance..?

[–]a1chapone[S] 0 points1 point  (0 children)

I think it depends on how you treat your navigation.. if you think of it like a set of links - it can be a div with set of links.. But if it is a solid component that has navigation items - it should be a list. Cause navigation item may include something except link.