Classes on the body tag

In Doug Bowman's second @media presentation he mentioned utilising classes on the body element to be able to affect the layout of the entire page. This simple technique uses descendant selectors in such a way that an entire page layout can be altered by adding or changing a class applied to the body tag.

For example visualise the following (simplified) stylesheet


  #maincontent {
    float : left
  }

  #secondarycontent  {
    float  : right
  }
  
  .home #maincontent {
    float  : right
  }

  .home #secondarycontent  {
    float  : left
  }

Assuming maincontent and secondarycontent are two divs, by adding the class 'home' to the body tag (<body class="home">), the two columns could be reversed. When you think about it, this method can be used to radically change the entire site layout with only one change to the markup and without requiring extra stylesheets. It's this exact method used to alter the look of each of the sections on Doug's site http://www.stopdesign.com

Show Comments