CSS Indention Method

Some have their own methods on how to write CSS, specifically when it comes to syntactical perfection like where to insert line-breaks, omiting the semi-colon from the last property, putting spaces between the colon that separates the property from its corresponding value, or even preposterous recommendations that tell developers to avoid rules that include shorthand properties at all costs. Well, ok, whatever. I'm not saying any of those are wrong or impractical. But I would like to introduce a different method of how you explicitly write the language itself.

Indention Explained

CSS is, in fact, a layout / presentation language. It is used to style markup such as html, xhtml, or even xml. Thus if you take the most common approach to html development, you are used to indenting your markup with nodes that have children, whom have children, whom have children, etcetera, etcetera. So, it makes sense to create hierarchal-like tree structures to make your source documents easier to read. Therefore in the same fashion, it would only seem logical to do the same with your Style Sheet markup. Let's consider this example of a very common webpage that includes universal elements like a header, an intro, a navigation, two content columns, and a footer.

document tree structure

<body>

  <div id='header'>

    <h1>My Web Document</h1>

    <div id='intro'>

      <h2>Tagline and company phrase</h2>

      <p>Description and Introduction to the company</p>

    </div>

  </div>

  <ul id='nav'>

    <li><a href='index.html'>Home</a></li>

    <li><a href='contact.html'>Contact</a></li>

    <li><a href='about.html'>About Us</a></li>

  </ul>

  <div id='contentBody'>

    <div id='latest'>

      <!-- latest news -->

    </div>

    <div id='archives'>

      <!-- archived news -->

    </div>

  </div>

  <div id='footer'>

    <p>Content Copyright (c) 2005</p>

    <p>Widgets Ltd. Inc.</p>

  </div>

</body>

In contrast, we can write the corresponding CSS markup that nearly mimicks that of its html counterpart using the same indention technique. Take a look:

The CSS Indention Method



body {  }

  #header {  }

    #header h1 {  }

    #intro {  }

      #intro h2 {  }

      #intro p {  }

  #nav {  }

    #nav li {  }

      #nav li a {  }

      #nav li a:hover {  }

  #contentBody {  }

    #contentBody #latest {  }

    #contentBody #archives {  }

  #footer {  }

    #footer p {  }

Voila. It's that simple. It makes your CSS easier to read, quicker to locate specific elements within your document, and conveys a clearer hierarchal structure. You could (literally) come back to your style sheet one year later and begin making changes without taking a single peak at the corresponding html document. Albeit I don't foresee anyone actually doing that, the principle in rehearse makes for practical Style Sheet development.

Indention used with Sister Methods

A beautiful realization of the indention method is that you can use it in conjunction with other maintenance techniques like Mike Stenhouse's Modular CSS approach as well as many other attempts to maintaining the CSS elephant. Furthermore, indenting your CSS will help improve your style sheet architecture which in the end will make the other kids like you better.

follow me

i am dustin diaz