How can I improve this markup and CSS to keep things simple and easy to work with?

Question

I have the following markup that is used to produce a pop-up style mega-menu (the .column div is there to allow multiple columns within each popup, though the example below only has a single column)...

<ul id="mainmenu">
    <li class="mega">
     <h2><a href="/">Menu 1</a></h2>
     <div class="submenu col1 leftmenu">
      <div class="column">
       <ul>
        <li><h3>Sub Menu Heading</h3></li>
        <li><a class="hilight" href="#">Do Something</a></li>    
        <li><a class="hilight" href="#">More great stuff</a></li>
        <li><a href="#">Another Item</a></li>
       </ul>
      </div>
        </div>
    </li>
    <li class="mega">
     <h2><a href="#">Second Menu</a></h2>
     <div class="submenu col3 leftmenu">
               blar blar blar
     </div>
    </li>
    // more menus here    
</ul>

As this nests quite deeply with quite a few similar tags (<li> <a>) I end up needing a fairly horrible list of selectors to style it in css, eg.

#mainmenu li h2 a {}
#mainmenu li.mega .column li h3 a {}

Can anyone suggest any improvements to the markup so that it would be simpler to target with CSS and jQuery?

Answer 1

If it were me, I'd put nicely targetable classes on the final entities in question, and change

#mainmenu li h2 a {}

to

#mainmenu .section {}

and

#mainmenu li.mega .column li h3 a {}

to

#mainmenu .subsection {}

and whatnot.

Answer 2

Not without seeing the rest of your CSS really, but I think your motivation is wrong. You should aim for your mark-up to reflect exactly what content is required. If this thing needs to be defined as separate from that thing they need to exist as different elements, if not, not. Separate concerns and don't even think about the CSS until your mark-up is as it needs to be.

I will say that it looks like it's possible you could collapse div.column and the ul child into just ul.column and the anchor in the h2's could possibly be moved inside the div.submenu's and given a "header" class for example.

Answer 3

Personally I think your html looks good, it's not plagued with endless ids and none of the classes seem redundant or useless.

If you don't ever use an h3 anywhere but inside an li, inside a column, inside a parent li then you could do: #mainmenu h3 a. I really think you can just be less explicit in your selectors.

I try to really utilize unique html tags so that all I need is an id on the top-most element and a few classes beneath if needed.

Answer 4

You could always use more specific selector names. Instead of:

#mainmenu li.mega .column li h3 a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3><a>

use

h3.mega_column a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3 class="mega_column"><a>

Answer 5

Aside from making sure that your structure is really fitting the semantics of your content and not just there for design reasons, there are a few things I can suggest:

1. You don't need to wrap <ul> in a <div> if there's nothing else in the div. They're both block-level elements and you could write <ul class="column"> and save yourself some unnecessary markup. It's redundant as-is.

2. You might be able to simplify your CSS a lot if you're not using class names to mean different things in different places. For example, if you only use the "column" class in under #mainmenu .mega then there's really no need to specify it every time. Just saying .column h3 a will get there just the same.

3. If you want simplicity in jquery you could also take advantage of the CSS3 selectors like :not() to sort things out for you. For example instead of $("#mainmenu li.mega .column li") you could instead do $("#mainmenu li:not(.mega)")

Those are my thoughts.