html vs css pt2
Last time I talked about the balance between html and css, today it is time to give you a solid example as to illustrate my point. Hopefully this will clear up any remaining doubt left from the first article. This article will take a closer look at navigation lists and how an extra span + optional extra class can make our css work easier.
navigation lists
/* html code */ <li><a> nav item </a></li> <li class="active"> nav item </li> /* css code */ li a {display:block; padding:0.5em;} li.active {padding:0.5em;} Navigation lists are a drag to style. Semantically, navigation items fit very well inside a list, but getting them to behave in a horizontal manner isn't easy when you're starting out with css. It gets worse when someone tells you that active items shouldn't be clickable. I know this way of thinking isn't generally accepted, but imagine having to code the navigation list like this in our example.
The problem we're facing is the disappearing <a> tag. Active items (or disabled items for that matter) are usually similar in styling, only differentiated by color or other graphical tuning. But the margins and paddings on such elements remain the same, as they should fit in with the normal navigation items. This issue is most apparent when the whole area of the navigation item should be clickable (display:block on the <a> tag), leaving us no choice as to apply the padding on the <a> tag.
The css provided above is annoying, because we have to repeat the padding value for both active and disabled items, as we lack a structural element to apply it to in case of a disabled link. If the design changes, we have to make sure we adapt both values. css code like this leaves us right open for errors, it litters the css file and makes it quite a bit harder to maintain.
improved code for better css handling
/* html code */ <li><a class="item"> nav item </a></li> <li class="active"><span class="item"> nav item </span></li> /* css code */ li .item {display:block; padding:0.5em;} /* css code alternative */ li a, li span {display:block; padding:0.5em;} And yet, this issue is pretty simple to fix, it just requires you to adapt your html code a bit. First I replaced the missing <a> with a <span> tag. It keeps the code structurally consistent (which is a tiny plus) but introduces a semantically useless span element (shame but I can definitely live with it).
I've also added a class="item" to both <a> and <span> tags, which keeps my css as clean as can be. You can just as well leave it out and use the alternative css notation I provided. I'm not a big fan of writing css like that, but I know quite a few of you are and since it's not really crucial to the point I'm trying to make I decided to add it just as well.
Whether you add the extra class or not isn't important, what matters is that we reduced the css code and even more importantly, lifted repetitive code from our css without making any semantical concessions in our html code. The only thing we did was add a useless structural element. If you ask me, that's a small price to pay.
more to follow
I hope this example has been clear enough to illustrate what I'm talking about. It's a first in a row of small improvements I'll be documenting. html purists probably won't like the idea of adding useless elements to their code, I on the other hand don't mind as long as it doesn't semantically hurt my html. I believe that the css improvement here is considerable enough to warrant the extra <span>. But be sure to make up your own mind!
Next time we'll be looking at titles, and how an extra class can ease your css worries a tiny bit.