Является ли оболочка <div> нарушением разделения содержимого?

Было сказано, что цель CSS - предоставить визуальное представление, а цель HTML - предоставить структуру документа. Ну, слава богу. Это стало намного проще, особенно по сравнению с тегами шрифтов!

Но на практике кажется, что многие из нас по-прежнему полагаются на HTML, чтобы использовать CSS, когда его не должно быть. Например, обычно, чтобы <div id="wrapper"> обертывать элементы внутри, чтобы тело могло быть центрировано. В чистом HTML он никогда не будет использоваться, потому что он бессмыслен и используется ТОЛЬКО для CSS.

Правильно? Таким образом, использование <div id="wrapper"> не нарушает одну из основ разделения контента и представления?

Ответ 1

Вид. Но это не имеет значения.

Принципы, такие как "отдельный контент и презентация", полезны, потому что они помогают вам достичь своих целей, делая код легче меняться. Они не похожи на правила ядерной безопасности - в отличие от них, никто не рискует умереть, поэтому "нарушение" - это сильное слово.

Вложение в обертку <div> для ограничения ограничений в CSS (и/или браузерах) в порядке. <div> и <span> предназначены для такого использования, поскольку они определены, чтобы не передавать никакого значения (т.е. они не изменяют "структуру" документа). Это не повредит код.

Если вы можете избежать этого, отлично. Но не беспокойтесь, если вы не можете. Есть большая рыба, чтобы жарить.

Ответ 2

В любом случае "обертка" является плохим выбором для идентификатора. Как правило, обертывание DIV не используется только для простых задач выравнивания (в противном случае используется SPAN), а также предоставляет/определяет структуру вашей веб-страницы. Поэтому, на мой взгляд, упаковка DIV не нарушает разделение содержания и презентации.

Ответ 3

Вы можете использовать что-то вроде:

<div id="content_container">
<div id="section_container">
<h2></h2>
<p>stuff</p>
</div>
</div>

И я считаю, что это дает правильную структуру вашему документу. Хотя, вероятно, было бы лучше иметь элементы для этого (например, <content> и <section>), потому что id может быть только полным для нас не для разбора документа. div не имеет фактического значения, это просто контейнер для элементов блока, и все, и поэтому я считаю, что он не может нарушать разделение содержания и презентации.

Сказав все, что вы могли бы также использовать элемент <body> для центра вашего контента (это элемент в конце концов), но я не уверен на 100%, если он работает в старом IE (старый смысл IE 6).

Ответ 4

Если ваш идентификатор DIV имеет точный эквивалент в HTML5 (div id="nav", например), то он является структурным и, следовательно, вполне приемлемым. div id="wrapper", вероятно, эквивалентен div id="article" или div id="section", поэтому он, вероятно, ОК, хотя и плохо названный, как предполагает Anzeo.

Ответ 5

Он может делать, хотя иногда div предоставляет структуру. Мы должны признать, что CSS еще не совершенен и что компромиссы должны быть сделаны в нашем HTML. В частности, в этом случае, когда все браузеры поддерживают псевдоэлемент CSS3 ::outside (http://www.w3.org/TR/css3-content/#wrapping), я думаю, что многие оберточные divs станут нет необходимости.

Ответ 6

Мое личное мнение - обертки имеют очень полезную и необходимую цель, хотя я не использую термин wrapper. Рассмотрим div, который имеет ширину набора 200px, но мы хотим получить границу без увеличения ширины div, которое нам понадобится для этого решения:

div#posts {
    width: 200px;
    height: 200px;
}
div#posts-inner {
    padding: 10px;
    border: 1px solid #ccc;
}

<div id="posts"><div id="posts-inner">
    <p>My Posts</p>
</div></div>

Если вы эффективно разметки CSS, вы можете избежать примеров менее полезных объявлений css, например:

#posts {
    border: 1px solid #ccc;
}

Если вы помещаете свои CSS-элементы в контекст, а не предполагаете, что его класс представляет

div#posts-wrapper {
    border: 1px solid #ccc;
}

Это улучшит разделение элементов дизайна и контента в вашем CSS.

Ответ 7

Лучше всего думать об этом с точки зрения семантики. Вы должны использовать правильный тег для правой части своей части. HTML5 - это большой шаг в этом направлении, позволяющий использовать больше тегов, таких как "статья", "nav" и "section", которые дают больше семантического значения, чем div.

Однако, div был находкой для дизайнеров, потому что он дал вам простой элемент блочного уровня с небольшим смысловым значением, отличный от того, чтобы предоставить "разделитель" или "раздел" страницы (как и тег раздела в HTML5). Не имея ничего другого, вполне приемлемо использовать даже в семантическом смысле, потому что у нас не было ничего другого, имеющего то же значение и имеющего те же самые характеристики по умолчанию.

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

Ответ 8

Общепринято видеть "DIV id = 'wrapper' 'для обертывания элементов внутри, так что тело может быть центрировано. В чистый HTML, он никогда не будет использоваться потому что он бессмыслен и используется ТОЛЬКО для CSS.

Является ли содержащая стена не структурным элементом здания? Я бы сказал, что содержащая стена на самом деле является одной из наиболее распространенных структурных элементов, которые вы можете найти в элементах.

Поэтому не используется DIV id = wrapper фактически нарушают один из основы содержания-презентации разделение?

Нет, содержащий элемент (или <div id="wrapper">) является такой же структурой документа, что и <header> <nav> <body> или <article>.

Даже если он не считается структурным, целью ненавязчивого дизайна является разделение максимально возможной структуры (HTML) на стиль (CSS) и поведение (JavaScript). В конце концов, ненавязчивый дизайн на самом деле представляет собой всего лишь набор рекомендаций по лучшей практике для создания более удобного кода.

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