Validcode.ruРазбираемся в верстке и не только… вместе

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

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

Сперва разберемся с источниками избыточного кода. Всем нам известно, что существует множество программ, позволяющих верстать сайты визуально. К ним можно отнести Dreamweaver, FrontPage… что там говорить… даже Word умеет это делать. Приведу простой пример… из любимого Word 🙂 .

Что необходимо сделать:

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

<img src=»…»> И какое-то описание

То, что выдал Word на выходе убило наповал. Код приводить не буду, смотрите скриншот.

Далее, очень много студий по разработке сайта, предлагают пользователям различные cms, с помощью которых можно наполнять сайты не имея ни малейшего представления об HTML и CSS. Обычно в эти cms встроены WYSIWYG-редакторы (What You See Is What You Get) — что видишь, то и получаешь. Нередко просматривая html-код на выходе можно встретить такие фрагменты кода:

<span style=»font-weight: bold;»></span><span style=»font-weight: bold;»>Жирный текст</span>

Мусор видим?

Или такой код:

<span style=»font-weight: bold;»>Жирный текст</span>

Мне кажется лучше будет сделать так:

<b>Жирный текст</b>

К источникам избыточного кода можно также отнести использование бесполезных мета-тегов. Language, Copyright, Page-Type, Page-Topic, Contributors, Publisher-Email, Publisher, Distribution, Document-distribution, Document-classification, Reply-to и другие…. зачем? Как по мне, так самыми полезными являются Description и Keywords.

Движемся далее… Избыточный код в таблицах… Пример:

<table width=»100%» border=»1″ cellpadding=»0″ cellspacing=»0″ class=»table»>
  <tr>
    <td align=»right»></td>
    <td align=»right»></td>
    <td align=»right»></td>
  </tr>
</table>

Я думаю проще и правильнее этот код выглядел бы вот так:

<table cellpadding=»0″ cellspacing=»0″ class=»table»>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

а то, что убрали, выносим в CSS

.table {
  width: 100%;
  border: solid 1px #color;
} .table td {
  text-align: right;
}

Далее плавно передвигаемся к CSS Рассмотрим следующий код:

<div class=»menu»>
  <a class=»item» href=»1.html»>Ссылка 1</a>
  <a class=»item» href=»2.html»>Ссылка 2</a>
  <a class=»item» href=»3.html»>Ссылка 3</a>
</div>

.item {
  color: #595959;
}

А не лучше ли сделать так?

<div class=»menu»>
  <a href=»1.html»>Ссылка 1</a>
  <a href=»2.html»>Ссылка 2</a>
  <a href=»3.html»>Ссылка 3</a>
</div>

.menu a {
  color: #595959;
}

Результат — код без лишних фрагментов, более удобный для восприятия, а работает так же.

Довольно часто ознакамливаясь со стилями какого-либо сайта можно увидеть следующее:

.text {
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
} .item {
  background-color: red;
  background-image: url(../../image.gif);
  background-repeat: no-repeat;
  background-position: top;
  background-position: left;
} .main {
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

А я бы, например, вот как сделал:

.text {
  font: bold 14px Arial, Helvetica, sans-serif;
} .item {
  background: red url(../../image.gif) no-repeat left top;
} .main {
  border: solid 1px red;
}

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