Какой лучший трюк CSS, чтобы уменьшить, сколько HTML вам нужно?

Question

Какая самая умная техника CSS, которая позволяет использовать меньше HTML?

Одним из преимуществ правильного использования CSS является то, что он позволяет упростить HTML-код и полностью создавать эффекты в стиле CSS. Вначале это просто заменяло устаревшую разметку презентации HTML и spacer-GIF на CSS, но в последние годы появилось больше хороших идей.

Я ищу что-то менее очевидное, чем следующее.

• Замените HTML HR на CSS border для разделения разделов, которые уже являются DIV.
• Заменить HTML IMG на CSS background-image для графики, которая не является «контентом».
• Заменить текст HTML на CSS :before и content для текста, который не является «контентом».

Я не ищу методы, которые включают добавление JavaScript или большего количества HTML, например, дополнительные элементы DIV.

Методы, которые работают только в определенных браузерах и версиях, допустимы, при условии, что вы говорите, какие из них.

Answer 1

Использование умных селекторов CSS вместо дополнительных классов или идентификаторов.

---

Пример (списки навигации кажутся популярными):

<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>

Лучше:

<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 2

Специфичность может быть опущена, если не вкладывать элементы в div, а просто присвоить элементам уникальные идентификаторы.

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

Заменить на

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

Таким образом, ваш CSS будет идти от

div#mylist ul li { }

до

ul#mylist li { }

А HTML-кода было бы меньше.

РЕДАКТИРОВАТЬ : При ненужных обстоятельствах:)

Answer 3

Я думаю, что вопрос на самом деле задом наперед, и лучшая техника, которую я могу предложить, - даже не думать о CSS при написании разметки.

Ваша разметка должна стремиться быть независимой от стиля в любом случае, и она должна быть эффективно минимальной, чтобы точно содержать то, что нужно для передачи своих данных и указания классификации и идентичности внутри себя. Тогда вы считаете CSS действующим изолированно.

Это недостижимый идеал, но использование OO-подхода к разметке и CSS - это путь вперед.

Answer 4

Поскольку в последнее время дебаты возобновились, вот разница между использованием div и таблиц для макета из 3 столбцов:

<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

Использование CSS уменьшает вашу потребность в HTML, точка. Чем больше вы используете, тем больше вы уменьшите потребность в HTML. Я проголосовал за каждый ответ в этой теме, потому что все они по-своему правильны.

Подумайте о семантике вашей HTML-структуры и о том, что имеет значение. Создание длинных цепочек селекторов означает, что вы будете сужать крючки в своем документе. Кроме того, вы часто можете добавить класс к уже существующему элементу, чтобы сохранить себе тег <div> или <span>.

Все, что сказано, мой любимый трюк - умное использование background свойств для экономии на <img> тегах

Answer 6

Прежде всего, все, что вы должны планировать и структурировать свой HTML.

Допустим, ваш сайт имеет 3 колонки с верхним и нижним колонтитулом. Каждый из контейнеров будет иметь такой идентификатор, как #mainColumn, #leftColumn, #rightColumn - все в пределах #cointainer. Они равны на всех страницах.

Тогда, скажем, у вас есть 3 страницы, построенные с этим макетом, и структура контента похожа - заголовок, заголовок, текст и некоторые списки в столбцах. Пример:

• Главная
• Love
• Ненависть
• Stoned

если вы установите .love в том же div, что и #container, вы сможете изменить цвета всех редакционных элементов сайта, что будет естественно для Love (розовый), Hate (черный и красный), и побитый камнями (много цветов!) ...

Но на главной странице вы, возможно, захотите получить сводку по всем вашим категориям, поэтому вместо этого вы бы поместили классы .love, .hate и .stoned в блоки редакционного контента или, возможно, просто в #rightCol #leftCol и #mainCol.

Действительно простой пример, но суть в том, чтобы немного спланировать макет и структуру вашего сайта, прежде чем сойти с ума от клавиатуры.