Языком разметки документа по-прежнему должен оставаться html, а дизайн должен быть полностью на совести css.
Преимущество блочной верстки дивами известны каждому верстальщику. Тем не менее, в Интернете до сих пор часто можно встретить сайты, содержащие в своём коде строки наподобие:
<div style=”color:green”></div>
Что на самом деле лучше, чем было ранее:
<div color=”green”></div>
Проблем в обоих случаях нет, если проверять код валидатором, то он не выдаст ни одной ошибки.
Изначальная задача html заключается в описании логической части документа, тогда как css как раз и создавался в своё время для описания оформления документа. В качестве примера можно привести небольшой фрагмент кода старого сайта, оформленного на чистом html.
<!-- left column -->
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top"><td width="15%" bgcolor="#ffffcc"> left text / menu </td>
<td width="75%" bgcolor="#ffffcc" valign="top"> content
<!-- content -->
Так было раньше, сейчас же всю эту запись можно переписать так:
<div class="content">
Что даёт нам использование css?
- Код выглядит на много чище и нагляднее.
- Нам не нужно каждый раз повторять описание внешнего вида для нескольких повторяющихся блоков. Для этого нам достаточно указать класс, а уже сами его стили задать в css файле.
- Размер документа существенно сокращается. CSS файлы браузеры могут кэшировать, и соответственно загружать только один раз.
- Если необходимо внести изменения в оформление сайта, вам достаточно поменять необходимые стили только в одном месте, а не искать по всему сайту нужные участки кода. Особенно данный вопрос актуален для многостраничных сайтов.
Каков идеальный код? Тот в котором содержимое полностью отделено от оформления. При работе верстальщик должен описывать только логические блоки, совершенно не затрагивая оформление.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Реймакс</title>
</head>
<body>
<header>
<img src="logo.png" alt="Логотип" />
<ul>
<li>Реймакс</li>
<li>выйти</li>
<li>настройки</li>
<li>почта</li>
<li>оценки</li>
</ul>
</header>
<nav>
<ul>
<li><span>главная</span></li>
<li><a href="#">новости</a></li>
<li><a href="#">портфолио</a></li>
<li><a href="#">веб студия</a></li>
<li><a href="#">контакты</a></li>
</ul>
</nav>
<section>
<article>
<h1><a href="#">Заголовок</a></h1>
<div class="content">Текст статьи</div>
<div class="tags">Теги</div>
<div class="footer">Оценки и комментарии</div>
</article>
</section>
<aside>
<div class="news">
<ul>
<li>
<a href="#" class="title">Заголовок</a>
» <a href="#" class="article">Текст новости</a>
</li>
<li>
<a href="#" class="title">Заголовок</a>
» <a href="#" class="article">Текст новости</a>
</li>
<li>
<a href="#" class="title">Заголовок</a>
» <a href="#" class="article">Текст новости</a>
</li>
</ul>
</div>
<!-- Other blocks -->
</aside>
<footer>
© 2007–2011 «Реймакс»
</footer>
</body>
</html>
Данный пример является идеальным вариантом и соответствует последней спецификации html 5. В дальнейшем задача верстальщика начать оформление сайта ни разу не внеся корректив в данный код.
О CSS-фреймворках.
В последнее время достаточной популярностью пользуются CSS-фреймворки. Наиболее распространенным является 960 grid system. Последняя сборка стандартной версии AVE.CMS не стала исключением, стандартные шаблоны уже сейчас верстаются с ним.
Чем плох генерируемый им код? Для начала тем, что он нарушает основной и главный принцип разделения содержания и оформления. Вместо понятного кода мы видим классы и идентификаторы, из названия которых совершенно не понятно за что они отвечают. Кроме того, в случае объёмных сайтов количество классов у одного блока может быть достаточно большим, что делает код ещё менее удобным для восприятия.
Языком разметки документа по-прежнему должен оставаться html, а дизайн должен быть полностью на совести css.