html vs css pt4
This will be the final article in my little series on leaner css at the expense of slightly more convoluted html. The previous entries gathered fairly mixed reactions, which was pretty much the point of writing them. These methods of writing html and css are based on ideals and interpretation, it is only natural that each person will have their own views on them. As long as I got that across, the articles were a success. This last entry will focus on div-wrapping html elements with rigid structures. Buckle up.
wrapping up
<div class="focus"> <div class="focusWrap">...</div> </div> I'm not a big fan of using javascript to add design wrappers. I find it too much hassle controlling two designs (one with and one without javascript) and it only slows the page rendering down to a point where it can become irritating. So I'm not shy of using a wrapper here and there, purely for presentational means. Though the word wrapper might be a bit misleading as I often don't actually wrap the components I'm styling.
As the code above illustrates, I'm adding the wrappers inside the component so the component root stays clear and obvious. The wrapper still wraps the contents of a component, but it doesn't wrap the component itself. By doing that, it allows me to add or remove wrappers depending on the design needs without changing the root of the component. A big plus for code consistency.
Of course, this is all very nice, but in reality this method isn't always feasible. When working with html elements that have a rigid structure (like html lists or tables) you can't add wrappers inside the root elements because html simply won't allow it. In this situation, you can only wrap from the outside.
wrapping rigid html elements
<div class="breadcrumb"> <ul>...</ul> </div> The code above is an example of how I implement a breadcrumb. Instead of placing the breadcrumb class on the <ul> I set it on a wrapper <div>. Apart from a couple of css benefits, this has fairly big structural benefits too. For example, you can now easily add a short text in front of the breadcrumb, where things like that used to make a mess of your nicely planned html code (and semantics).
Above that, you now have a container which can accept extra wrappers if needed, much like in the first example on this page. Working like this doesn't make your html leaner, but it sure makes your components more flexible.
css benefits
As for css benefits, they usually pop up when the design needs to be implemented. As list are often quite hard to style already, the extra wrapper comes in handy when you need to design these typical headers which span the full width of the screen, but with the content aligned to the rest of the design (basically, something like .breadcrumb ul {width:70em; margin:0 auto;}).
The structural benefits also allow you to apply more complex styling on the whole element, instead of adding wrappers inside the <li> element and to try and paste a design together. The benefits of this methods aren't as precise as in the previous cases, but I've found that adding these wrappers comes in handy in every project so far.
all wrapped out
I know <div> elements are a dangerous topic, especially when they hold no further structural importance. But since these rigid html elements leave little room for real-world styling issues, they help to make both html and css more flexible, and they allow you to keep your options open when sudden design or functional changes are required.
Again, designing for flexibility is a decision you have to make yourself, as it has a few drawback (although no serious ones if you ask me, they are mostly purist views). Make up your own mind, learn from mistakes in the past of don't be afraid to deliver html mark-up that contains one or more "unnecessary" elements. After all, they might come in handy one day. The issues raised in these articles are all based on real world examples and pretty much mimic the way I work. They have grown from problems I've experienced and they've proven their worth. Hope you at least got to think your point of view over.