Excessive Elements

As people expand on their HTML and CSS knowledge, there is a progression. At least for me, there was. It starts off with applying a quick style to an HTML element. "Hey, that was cool." It quickly goes from there to putting declarations in the header or in a stylesheet. Classes litter the page. How many times have you seen this on a project?

<p class="paragraphtext">Lorem Ipsum...</p>
<p class="paragraphtext">Lorem Ipsum...</p>
<p class="paragraphtext">Lorem Ipsum...</p>

From there, the cascade kicks in and finally you see wrapper div's around everything. That's what I'm talking about. This common stage (and I still do this when I'm not thinking things through thoroughly) will find you doing things like...

<div class="header"><h2>My header</h2></div>
...or even more likely...
<div class="nav">
   <ul>
      <li><a href="#">My navigation</a>
   </ul>
</div>

Isolated like this, it's probably quite obvious. The wrapper div is just unnecessary. You can apply the class to the inner element or, even better, you may be able to use a parent element to determine styling if you know it's going to be the only one within that container (more likely with a header than with an unordered list).

Once IE7 gains some traction, you'll also be able to take advantage of the CSS child selector (>) to style immediate children elements (as opposed to grandchild elements). Most other browsers already support the child selector.

#main > ul { background-image:url(ilovebatman.jpg); }

Simplifying the HTML can slim file size (if ever so slightly) and make it easier to troubleshoot.

Published March 18, 2006 · Updated September 14, 2006
Categorized as HTML and CSS
Short URL: https://snook.ca/s/552

Conversation

21 Comments · RSS feed
Matthew Pennell said on March 18, 2006

One trick that Andy Budd covers in CSS Mastery (at least I think that's where I saw it most recently) is the faking of child selectors by using the universal selector:

#main ul { background-image: url(ilovebatman.jpg); }

#main * ul { background: transparent; }

Elliot Swan said on March 18, 2006

For the most part I agree with you, but unfortunately I've been finding lately that in order to get much of the design effects I want, I'm forced to use otherwise unnecessary wrappers and elements.

Things like centering and rounded corners come to mind.

P.J. Onori said on March 18, 2006

Great article. As you insinuated, I really think the main difference between good CSS and great CSS are the amount of lines of code.

Manno said on March 18, 2006

The key is use multiple classes

david said on March 18, 2006

its funny how you can actually judge where you are knowledge wise, by where the aritlces in the standards blog goes, I had just this same "ah ha" moment about 3 months ago and have been trending away from uneccessary wrappers.

Jeroen Mulder said on March 18, 2006

Not until we can freely use multiple background images on a single element. Only then I can stop using wrapper elements.. unfortunately.

This is especially the case when dealing with liquid layouts -- one background image needs to be split in three.

But there's another important message in here and that's div-itus. I've found that especially beginning CSS users do not understand that CSS can be applied to any element. So they often end up using div's because they're still thinking way too limited as a result of having used tables exclusively.

Jonathan Snook said on March 18, 2006

Jeroen: you hit the essence of this article. It's not about having hooks to tie CSS into because the examples in the article had nothing to do with complex CSS and everything to do with 'div-itis'.

For things like rounded corners, I've been trying out Rico's rounded corner script. It's JavaScript-based but depending on how often and how you're using it, it may end up being about the same file size as using images and css.

trovster said on March 18, 2006

Many people who I help say, "I've ditched tables, I'm using divs now" make me cringe. Divitis and classitis, I think, are just as bad as tables!

Best way, when you're learning, is to write the HTML first. Finish that, then style it. Once you know the rules, then you can avoid that step.

Johan said on March 18, 2006

A good article that is a good read too:

http://juicystudio.com/article/div-mania.php

Henrik said on March 18, 2006

You are correct in your observation Jonathan. There are however style matters such as this nav - try right aligning the text without putting a wrapper - then either you float the <li>s, reversing the order, or you make the ul to a block element. I just prefer making a wrapper div and then putting text-align:right as a property to it.

Jonathan Snook said on March 18, 2006

Henrik, well, if you just want to right align the elements, I'd display:inline the LI elements and then text-align:right the UL. (although, I know there's a use case where this is just a pain...I just can't remember what it is, I'm guessing with an image replacement technique of some sort.)

Eric Shepherd said on March 18, 2006

You forgot the first stage of CSS development - just using lots and lots of divs without any semantic HTML inside. Every .NET developer I've seen try to start using "standards" does this and very proudly shows me the result... "look at all my divs...."

trovster hit the nail on the head - the biggest thing to learn in the beginning is semantic HTML. Some people get it, some people don't, and the ones who get it are the ones who are going to be successful at CSS and standards.

I did a presentation at work about a month ago. I was asked to speak about CSS, and I spent 90% of the time speaking about HTML.

Man, the Senators are kicking our butts right now...

Corey Csuhta said on March 18, 2006

Such is the progression of the CSS-informed. And I'm not totally there myself.

First, you learn to write CSS. Then you learn how to do cool things. Then you write yourself into corners with over-use of divs. Then you have to either go back and simplify your code or re-write it. Finally, in about the 30th try, you learn write simple code and plan right from the start.

PS. Who came up with "div-itus" and "class-itus"? I feel like I've regressed 10 years whenever I pronounce these in my head. They sound like something you'd hear on cartoons rather than uttered from some web professional's mouth. Though, he/she did make a direct-hit describing the problem.

david said on March 19, 2006

yeah corey i understand what you mean, 'divitius' sounds like a disease, i oten wonder why people have such a strong negative feeling. we all have stages of learning. we just have to learn to coax each other to betterment not make up names we can fling at those who dont yet share our knowledge.

not saying Snook is saying this, just an observation.

gali said on March 19, 2006

i'm discovering this blog and it' s very cool, with good articles ;).

Excessive elements are a problem for me, i' m using exactly the kind of unnecessary divs from the beginning.
I' ve discovered the "class" power a few weeks ago, and if it' s well used, the code can be two times lighter and clearer !

Thank you for this article, this blog is really cool :)

Emil Stenström said on March 19, 2006

This sounds a lot like the different levels I think people evolve over. The div overuse is Level 4 in that list :)

Carl Camera said on March 19, 2006

@Eric: perhaps not EVERY .NET developer :-)

@Snook: Lots to think about here. I must admit I like to use a wrapper div around navigation to allow simple exclusion within print stylesheets. And if it's there already, well...easy to anchor off of it for styles within.

Veracon said on March 19, 2006

THANK YOU!
I've tried a lot to convince people that divisions are NOT better than tables, yet people rarely listen. It's great to know that someone understand me.

david said on March 19, 2006

I dont know Veracon, I have heard what you have said and been in discussions with you about divisions and what you are saying is not what snook is saying. hes not saying that divs are not better than tables he is saying what I have hinted at many a time, that divs need not be OVER / MISused. While you have argued that people should not use divs at all ( and maybe to that extreme only to prove the strenght of semantic code? ).

I believe that all markup has its proper use. It's up to us to teach ourselves those proper uses and that only comes through practice.

Lowell Wood said on March 20, 2006

Johnathon, did you mean to close that li there? Or did you leave it open for some reason that I dont understand at my low level of web nerdery?

Jonathan Snook said on March 20, 2006

Whoops, yeah, I did mean to close the LI. Although, with the assumption it was HTML and not XHTML, it'd still work.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.