What is the best CSS trick to reduce how much HTML you need?

Question

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.

Answer 1

Use an UL for creating a menu.

Answer 2

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

<div id="mylist">
    <ul>
       <li>ListItem1</li>
       <li>ListItem2</li>
    </ul>
</div>

Replace with

<ul id="mylist">
    <li>ListItem1</li>
    <li>ListItem2</li>
</ul>

That way your CSS would go from

div#mylist ul li { }

to

ul#mylist li { }

And there'd be less HTML.

EDIT: In unnecessary circumstances :)

Answer 3

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>
        ⋮
    </ul></li>
    <li class="section">Section 2<ul class="subnav">
        <li class="subsection">Section 2.1</li>
        <li class="subsection">Section 2.2</li>
        ⋮
    </ul></li>
    ⋮
</ul>

Better:

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

#nav {
    /* first level list */
}
#nav li {
    /* first level items */
}
#nav li ul {
    /* second level list */
}
#nav li ul li {
    /* second level items */
}
⋮

Answer 4

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

<table>
  <tbody>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
  </tbody>
</table>

Compared to:

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

and the CSS

div { float:left; width:33%; }

Answer 5

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.

Answer 6

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.

Answer 7

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