Take the 2-minute tour ×

What is the cleverest CSS technique that lets you use less HTML?

One of the advantages of using CSS well is that it can let you simplify your HTML, and produce look-and-feel effects entirely in the CSS. In the beginning this was just replacing deprecated HTML presentation mark-up and spacer-GIFs with CSS, but recent years have shown more good ideas.

I am looking for something less obvious than the following.

  • Replace HTML HR with CSS border, for separating sections that are already DIVs.
  • Replace HTML IMG with CSS background-image, for graphics that are not 'content'.
  • Replace HTML text with CSS :before and content, for text that is not 'content'.

I am not looking for techniques that involve adding JavaScript or more HTML, such as additional DIV elements.

Techniques that only work in specific browsers and versions are okay, provided that you say which ones.

share|improve this question
Use an UL for creating a menu. –  Natrium Feb 4 '09 at 13:07
i'd disagree with your first bullet point there being a Good Thing. <hr />s have valid semantic meaning, and it makes sense to use them and style them appropriately. –  nickf Feb 4 '09 at 13:17
We probably agree - of course HR has semantic meaning, but that is not always intended. Sometimes the 'designer' just wants a horizontal line. –  Peter Hilton Feb 4 '09 at 13:37
add comment

6 Answers

up vote 6 down vote accepted

Specificity can be omitted by not nesting elements in divs, and instead just giving elements themselves unique identifiers.

<div id="mylist">

Replace with

<ul id="mylist">

That way your CSS would go from

div#mylist ul li { }


ul#mylist li { }

And there'd be less HTML.

EDIT: In unnecessary circumstances :)

share|improve this answer
Except you often need to nest thiings in divs for styling purposes... –  cletus Feb 4 '09 at 13:14
I don't disagree with that, but there can be unnessary circumstances –  Kieran Senior Feb 4 '09 at 13:14
I don't default to putting an extra div around everything and never have. –  JohnB Dec 1 '10 at 7:39
add comment

Using clever CSS selectors instead of extra classes or IDs.

An example (navigation lists seem to be popular):

<ul class="nav">
    <li class="section">Section 1<ul class="subnav">
        <li class="subsection">Section 1.1</li>
        <li class="subsection">Section 1.2</li>
    <li class="section">Section 2<ul class="subnav">
        <li class="subsection">Section 2.1</li>
        <li class="subsection">Section 2.2</li>


<ul id="nav">
    <li>Section 1<ul>
        <li>Section 1.1</li>
        <li>Section 1.2</li>
    <li>Section 2<ul>
        <li>Section 2.1</li>
        <li>Section 2.2</li>

#nav {
    /* first level list */
#nav li {
    /* first level items */
#nav li ul {
    /* second level list */
#nav li ul li {
    /* second level items */
share|improve this answer
Can you give a specific example with code? –  Peter Hilton Feb 4 '09 at 13:43
That is what gave me the biggest decrease in file size. CSS selectors became really powerful over the years and I was easily able to reduce my id/class usage in html by 30-40%. Sometimes you should use extra classes to make it not too abstract but css selectors are a great way to reduce filesize w3.org/TR/css3-selectors Using html 5 tags also can reduce the amount of selectors since you now can access these elements directly nav, header, footer etc. –  Layne Jul 19 '13 at 18:54
add comment

I think the question is actually backwards, and the best technique I can offer is to not even think of CSS when writing your markup.

Your markup should strive to be independent of the styling anyway, and it should be efficiently minimal to contain exactly what it needs to to convey it's data and indicate classification and identity within itself. Then you consider the CSS acting in isolation.

That's an unattainable ideal, but taking an OO approach to markup and CSS is the way forward.

share|improve this answer
add comment

Since the debate has sparked up again recently, here's the difference between using divs and tables for a 3 column layout:

      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>

Compared to:

<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>

and the CSS

div { float:left; width:33%; }
share|improve this answer
It's an old debate... most have already swallowed the tableless design pill. –  Chuck Conway Feb 4 '09 at 14:59
It's not about tableless design, it's about semantic correctness, and Phil's example could be a case where a table is correct, impossible to say without the context of data. –  annakata Feb 4 '09 at 15:02
Whilst I realise the debate was old, it has flared back up again recently, due to 37signals bringing it up. Thanks annakata, I should have pointed out that this is for layout and not a table of data, in which a table should obviously be used –  philnash Feb 4 '09 at 17:02
add comment

First off all you should plan and structure your HTML.

Let's say your site has 3 column layout with a header and a footer. Each of the containers will have an ID like #mainColumn, #leftColumn, #rightColumn - all within #cointainer. These are equal on all pages.

Then, let's say you have 3 pages built up with this layout, and the structure of the content is similar - heading, title, text and some lists in the columns. Example:

  • Main
  • Love
  • Hate
  • Stoned

if you set .love on the same div as #container, you will be able to change the colors on all the editorial elements on the site, which would be natural on Love (pink), Hate (Black and Red), and Stoned (Lots of colors!)...

But on the Main page, you might want to have a summary of all your categorys, so instead you'd put .love, .hate and .stoned classes on blocks of the editorial content, or maybe just on #rightCol, #leftCol and #mainCol.

Really basic example, but the key is to plan the layout and structure of your site a little before you go crazy on the keyboard.

share|improve this answer
Calling your columns #leftColumn and #rightColumn is pretty limiting when you want to change the page layout. –  Ciaran McNulty Feb 4 '09 at 15:12
Agree :-) But this was just a quick example. –  olemarius Feb 6 '09 at 10:54
add comment

Using CSS reduces your need for HTML, period. The more of it you use, the more you'll reduce your need for HTML. I've voted up every answer in this thread, because they're all correct in their own way.

Think about the semantics of your HTML structure, and what's relevant. Building up long strings of selectors means you'll be narrowing down the hooks in your document. Likewise, you can frequently add a class to an already existent element to save yourself a <div> or <span> tag.

All that said, my favorite trick is the clever use of background properties to save on <img> tags

share|improve this answer
add comment

Your Answer


