Sentinel: Your Web-Performance Watchman

Using the <body> element as a wrapper

Written by on CSS Wizardry.

Table of Contents

This is a tiny little blog post that a lot of you will already be aware of, however in my experience I’ve found that for every one person that does realise this, there are about two who don’t.

A lot of developers will have a wrapper <div> in their markup in which the page is contained. It might look something like this:

<code><span class="code-comment"><!-- Markup --></span>
<body>

  <mark><div id="wrapper"></mark>
  
    [content]
    
  </div>
  
</body>

<span class="code-comment">/* CSS */</span>
body{
  font-family:sans-serif;
  background:#fff;
  color:#333;
}
<mark>#wrapper{</mark>
  width:940px;
  margin:0 auto;
}</code>

It most situations this could be simply rewritten:

<code><span class="code-comment"><!-- Markup --></span>
<body>

  [content]
  
</body>

<span class="code-comment">/* CSS */</span>
body{
  font-family:sans-serif;
  background:#fff;
  color:#333;
  width:940px;
  margin:0 auto;
}</code>

You <body> is a container.

Obviously there will be some instances where this won’t be suitable–and you’ll spot what those are as you come across them–but for the most part, you can drop that unnecessary wrapper <div> and use the <body> element as a wrapper.

Hat-tip to Simon Wiffen for showing me this a while ago.



Did this help? We can do way more!


Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024

Learn:

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.