Hacker News Reader

Comment by csbartus | Hacker News Reader

Okay, let's see a simple example.

I have a navigation list which I want to display horizontally as a menu bar. In plus I want to highlight the current element with jQuery.

How to mark up this list? My immediate answer would be this:

      <ul id="navigation" class="inline-list">    
         <li><a href="">...</a></li>
      </ul>

where .inline-list will transform this list to be displayed horizontally and #navigation will help to add jQuery on it.

The rule for marking up in this case would be:

  * use #ID whenever you want to locate an element
  * use .class whenever you want to alter the display of an element from the standard

Is that simple rule could be extended or made universal? That would be my question.

View on HN

I usually use extra classes instead of IDs to differentiate specific chunks in cases where the may or may not be multiples in the future (e.g. you want nav at the top AND bottom of a page).

      <ul class="main-nav inline-list">    
         <li><a href="">...</a></li>
      </ul>

To style/highlight my example the above: //This will not have to be modified if we want to add more nav instances .main-nav.inline-list li{float:left;}

    $('.main-nav.inline-list a.selected').highlight();

To style/highlight your example the above (at top and bottom of page):

     //Each time you add another instance, you have to add its new id/selector (not very DRY)
     #navigation.inline-list li,
     #navigation_b.inline-list li{float:left;}

     $('#navigation.inline-list a.selected, #navigation_b.inline-list a.selected').highlight();

Again, it's personal style, but I've never found myself saying "boy I wish I used an ID instead of an adding another class" where many times you regret the use of ID because when you ultimately need to duplicate that element, you are effecting the dryness of your CSS and Javascript. Plus, with modern selector engines the performance of ID vs class based selectors is not really going to have that big of an impact.

The times I use ID in my markup is more for sub-navigation through the page rather that styling-specific reasons.

    <h2 id="chapter_two">Two</h2>
    <a href="#chapter_two">Got to Ch. 2</a>

Reply on news.ycombinator.com