Question

I am making a button that looks like this:

<!-- Container -->
<div>

<!-- Top -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Middle -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Bottom -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

</div>

It has many elements, because I want it to be skinnable without limiting the skinners abilities. However, I am concerned about performance. Does having a lot of DOM elements refrect bad performance? Obviously there will always be an impact, but how great is that?

Update:

The container div sets properties like drop shadow and border for the whole button. Then we have a grid-like 3×3 where each corner can have its own image, border and other CSS properties. And finally we have the middle part that contains the text and possible some other styling like padding.

Say I want to have a button with box-shadow, 4 corner images, 4 edges images and the center image where all images are SVG and the center needs padding. How would I accomplish this with less DIVs? My target browsers are HTML5 browsers.

Answer 1

This is hard to answer because obviously, the impact will vary from browser to browser.

For a single button, though, that is a lot of elements. Any chance of cutting down some?

What I also find difficult is that the “div soup” makes code extremely hard to read, and requires every element to get a class for styling. Try to find more suitable elements like

• <h1> <h2>… for captions and titles

• <ul> <li> … for navigation and other lists

Also try to work with border and background-image properties where possible, they will almost certainly reduce the need for the number of elements used. I can’t think of a button that needs this many elements to work.