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

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 🙂