Наилучшая практика для обозначения DIV в начальной компоновке

Новый вопрос здесь. Я нахожусь на начальных этапах создания сайта в HTML/CSS на основе эскиза, который я сделал. Поэтому я планирую свои DIV на домашней странице, и мне интересно, как их назвать и какие элементы должны иметь свои собственные контейнеры. До сих пор у меня есть следующее:

контейнер (содержит все на странице)
(будет содержать логотип и ссылки, которые визуально видны)
сноска
(это будет содержать только виджет, который воспроизводит звуковые дорожки)

Теперь я также хочу, с правой стороны моей страницы, на боковой панели, три других элемента:

поле, содержащее заголовки/описания RSS-канала из моего блога.
поле, содержащее несколько дат предстоящих событий
поле, содержащее некоторые ссылки на мои другие сайты.

Я ищу мнения о том, что является лучшим (и, я думаю, самым "семантическим" ) способом обработки DIV для этих элементов "боковой панели". Поскольку мой план состоит в том, чтобы эти три прямоугольника совпадали друг с другом, я должен просто создать одну главную "боковую панель" DIV, а затем создать отдельные DIV для каждого из элементов ( "feed-box", "event-box" и "link-box"? Или не должно быть "боковой панели" DIV (не так ли подразумевается стиль/позиция?), а вместо этого просто использовать три конкретных DIV?

Кроме того, должен ли я предоставить этот ящик, содержащий аудиовизор, идентификатор "содержимого" (хотя я точно знаю, что в него входит), или это должно быть что-то вроде "аудио-виджета"? (Кто знает, может быть, через год он будет содержать другой контент.)

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

Спасибо.

Ответ 1

Первый вопрос, который вам нужно задать, заключается в следующем: ваша матовая фиксированная или переменная ширина?

Если фиксированная ширина, обычная практика заключается в том, чтобы обернуть все в общий div (обычно называемый "контейнер" или "обертка" ). У вас это уже есть.

Как вы размещаете остальные ваши div, а затем влияет на порядок, в котором они отображаются в вашем документе (например, использование float имеет тенденцию "инвертировать" естественный порядок).

У меня, вероятно, было бы что-то вроде этого:

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="sidebar">
    <div id="headlines"></div>
    <div id="events"></div>
    <div id="links"></div>
  </div>
  <div id="footer"></div>
</div>

с рудиментарным CSS:

html, body, div { margin: 0; padding: 0; border: 0 none; }
#container { width: 960px; margin: 0 auto; }
#content { width: 760px; float: left; }
#sidebar { width: 200px; float: right; }
#footer { clear: both; }

Ответ 2

Единственный правильный ответ - использовать как можно меньше контейнеров, чтобы выполнить задание. Тогда, когда значение идентификатора просто запоминается, каждое значение ID должно быть уникальным. НЕ добавляйте дополнительные элементы div, чтобы иметь дополнительные соглашения об именах. Div - это семантический элемент, смысл которого - разделение документа, которое часто злоупотребляют.

Ответ 3

Вот как я бы рекомендовал. Я предпочитаю сохранять id="container" зарезервированным и доступным для раздела <div> для контента (в отличие от верхнего или нижнего колонтитула). Таким образом, элементы идентификатора раздела контента могут использовать id="content", и мне не нужно беспокоиться о столкновениях.

<div class="container">
  <div class="header">
    <div class="headerLeft"></div>
    <div class="headerMiddle"></div>
    <div class="headerRight"></div>
    <div style="clear:both"></div>
  </div>
  <div class="content">
    <div class="contentLeft"></div>
    <div class="contentMiddle">
      <div id="style" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Style
      </div>
      <div id="content" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Content
      </div>
      <div id="originality" onclick="javascript:document.getElementById(this.id).setAttribute('visibility','hidden');">
        Originality
      </div> 
    </div>
    <div class="contentRight">
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
      <div class="feedBox"></div>
      <div class="eventsBox"></div>
      <div class="linksBox"></div>
    </div>
    <div style="clear:both"></div>
  </div>
  <div class="footer">
    <div class="footerLeft"></div>
    <div class="footerMiddle"></div>
    <div class="fooderRight"></div>
    <div style="clear:both"></div> 
  </div>
</div>

1) В приведенном выше примере можно повторно отобразить весь раздел содержимого веб-страницы, а не только этот div, если контейнер также имел id="content", как предполагалось, если вместо class используется атрибут id.

2) Если вы можете захотеть иметь больше одного канала или другого элемента с несколькими вхождениями, классы - это единственный путь. Только одна id может использоваться на странице, но может быть много classes.

Некоторые базовые CSS для его стиля:

.container { width: 960px; margin: 0 auto; }
.header{ background-color:#000000; color:#FFFFFF; }
.headerLeft{ width:0px; float:left; }
.headerMiddle{ width: 960px; float:left; }
.headerRight{ width: 0px; float:right; }
.content { background-color:#000000; color:#FFFFFF;}
.contentLeft { width: 200px; float: left; color:#FFFFFF;}
.contentMiddle{ width: 680px; float: left; min-height:550px; background-color:#FFFFFF; color:#000000;}
.contentRight{ width: 180px; float: right; color:#FFFFFF;}
.footer { background-color:#000000; color:#FFFFFF; }
.footerLeft { width:0px; float:left; }
.footerMiddle { width: 960px; float:left; }
.footerRight { width: 0px; float:right; }
.feedBox {}
.eventsBox {}
.linksBox {}