Two weeks ago I wrote a short piece on the cost of tweaking for css selector performance, explaining that it's never a win/win situation. Maintenance and correctness are put at a disadvantage when css selectors are changed to perform as fast as possible. In this article I'm going to focus on html, looking at minimal html accomplished by tag cutting and the impact this has on your project. Once again the conclusion is clear: tag cutting comes with a serious cost.
I find the image above to be one of the best examples that illustrates this debatable technique. Just imagine that container 1 is the page header, container 4 is the page footer and container 2 and 3 are simple content containers. The difference between the two examples lies with the extra wrapper around container 2 and 3 in the second example. Many people will label this extra wrapper as redundant, but it does make a big difference.
on html and structure
The real question is how container 2 and 3 are related to container 1 and 4. In the first example all four containers exist on a single dom level, which is a bit odd when marking up a typical header - main - footer structure. In the second example container 2 and 3 are grouped together. The header and footer now function as a header and footer of this entire group, which makes a lot more sense. From a structural point of view, this is a major difference which should not be ignored.
It's true that in many cases the wrapper is unnecessary from a css perspective, but that's no reason to simply remove it, especially when it has a clear structural function.
Another problem with tag cutting is that it is based on a single snapshot of your project. It only takes into account current project specifics. There are unmistakable connections between structure and design and because of that it is safe to assume that there is a very real chance that future updates of your site might require the use of this wrapper after all.
When that happens, it's a lot easier to have the html ready and just upload a new version of the css, rather than to incorporate an extra html rework trajectory. It decreases dependencies, at the same time reduces the chance of unexpected errors.
Tag cutting comes with maintenance costs and reduces the future-proofness of your html code, a drop in quality you shouldn't be willing to risk, especially if you consider the minimal impact of this technique. Performance is important, but there is more to web design than just speed alone.