Как семантический X / HTML может сэкономить время, когда мы будем писать CSS? - PullRequest
Новая
       28

Как семантический X / HTML может сэкономить время, когда мы будем писать CSS?

0 голосов
/ 05 февраля 2010

Как разметка Semantic X / HTML может сэкономить время -

  1. когда мы напишем CSS для сайт
  2. и если какие-либо изменения в дизайне клиент в будущем.
  3. И почему таблицы на основе макетов будут занять больше времени всегда в обоих состояние

Сегодня я должен объяснить это студентам.

У меня есть несколько примеров, но я хочу, чтобы более хороший пример и идеи были хорошо объяснены.

Я хочу объяснить, в чем преимущества Semantic X / HTML-разметки с точки зрения разработчиков.

Заранее спасибо

Обновление:

Преимущества использования разметки семантики :

  1. Он будет хорошо читаться людьми, которые увидят документ в среда, в которой не может быть CSS приложенное.
  2. Веб-разработчикам будет намного проще поддерживать код, и отделить контент (HTML) от презентация (CSS).
  3. Семантическая разметка может уменьшить потребности группы CSS селекторы в некоторых случаях.

Ответы [ 3 ]

3 голосов
/ 05 февраля 2010

Основным преимуществом, помимо более надежного и контролируемого кода, для разработчиков является понятный код. С написанием семантического XHTML вы можете избежать написания расплывчатого кода, который будет трудно расшифровать другим разработчикам или вам самим в будущем.

IE. <address> лучше перечислить адрес, чем использовать <div> (что часто случается ...), но при этом имеет ту же гибкость, стиль и улучшенную читаемость.

2 голосов
/ 05 февраля 2010

Из моего опыта работы: мне уже несколько раз приходилось смотреть на унаследованную разметку от моего предшественника или от совершенно других людей (и на самом деле один или два раза от себя). Иногда у меня было только то, что пришло от просмотра источника в браузере. Мои выводы до сих пор были:

  • Если автор использовал семантическую разметку , насколько это было возможно, вместе с понятными и логическими именами классов, было действительно легко и весело узнать структуру страницы и, например, код новый виджет или реструктурировать макет столбца или прочее

  • Если автор использовал табличный макет , а у меня также были вещи из конца 90-х годов, это полный беспорядок. Вы должны выяснить, какая строка таблицы выполняет то, к какой ячейке таблицы относится и где, и если вы начинаете думать, что получите контроль, вы пропустили rowspan="3" 300 строк разметки ранее. Даже в Firebug вы можете разозлиться от такого супа-метки.

    Добавление новых вещей здесь может стать довольно авантюрным. Если вы добавляете контент в ячейку таблицы и не полностью фиксируете ширину и высоту нового материала, вы можете столкнуться с неприятными пробелами по всей странице и забыть открыть или закрыть <td> s где-то (с 200 ошибки валидации на исходной странице, вы, вероятно, где-то что-то упустили) могут привести к полностью испорченному виду.

  • Если автор использовал divs и span повсеместно, но не делал семантической разметки (то есть пишет <div class="header1"/> вместо <h1/>), это все еще способы лучше, чем макет таблицы (в большинстве случаев из-за упомянутых rowspan и colspan и потому, что у вас есть шанс, что страница может не полностью взорваться, если где-то отсутствует </div>), но вы все равно можете сойти с ума от разметки, как 

    </div></div>
</div>
   </div>
  </div>
</div></div>
  </div>

    Кроме того, если бы у меня была сопровождающая таблица стилей, это тоже был в основном полный беспорядок. Различие между .header, .header1, div.header_level1 и #middle .h1 заставляет вас переключаться между таблицей стилей и разметкой.

1 голос
/ 05 февраля 2010
  1. мы напишем CSS впервые для сайта

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

  1. и, если какие-либо изменения в конструкции поступят от клиента в будущем.

Вы можете создавать свои сайты, используя шаблон проектирования MVC, это внесет множество изменений в дизайн вашего сайта.

  1. И почему макеты на основе таблиц всегда будут занимать больше времени в обоих состояние

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

...