What is the best CSS trick to reduce HTML code?

Question

What is the smartest CSS technology that allows you to use less HTML?

One of the benefits of using CSS well is that it allows you to simplify your HTML code and produce CSS-style effects completely. At first, it simply replaced the obsolete HTML presentation and spacer-GIF labels with CSS, but better ideas have come up in recent years.

I am looking for something less obvious than the following.

• Replace HTML HRwith CSS borderto separate sections that are already divs.
• Replace HTML IMGwith CSS background-imagefor graphics that are not “content”.
• Replace HTML text with CSS :beforeand content, for text that is not “content”.

I'm not looking for methods that include adding JavaScript or more HTML, such as additional div elements.

Methods that work only in certain browsers and versions are fine if you say which ones.

Answer 1

Specificity may not be omitted by nesting elements in a div, but instead simply gives the elements unique identifiers themselves.

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

Replace

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

So your CSS will go from

div#mylist ul li { }

to

ul#mylist li { }

And there will be less HTML.

EDIT : under unnecessary circumstances :)

Answer 2

Using smart CSS selectors instead of extra classes or identifiers.

---

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 3

, , , , - CSS .

, , , , . , CSS .

, OO CSS - .

Answer 4

, , divs :

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

:

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

CSS

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

Answer 5

, HTML.

, 3 . ID, #mainColumn, #leftColumn, #rightColumn - #cointainer. .

, 3 , , : , , . :

• Hate
• Stoned

.love div, #container, , Love (pink), Hate (Black and Red), Stoned ( !)...

, .love,.hate .stoned , , #rightCol, #leftCol #mainCol.

, , , .

Answer 6

CSS HTML, . , HTML. , -.

HTML , . , . , , <div> <span>.

, , - background <img>