Верстка и css-фреймворки

О названиях кнопок в интерфейсах
Динамические запросы в AVE.CMS

Языком разметки документа по-прежнему должен оставаться 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.

Контакты студии

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

Беларусь, г. Гомель, ул. Сосновая 20

+375 44 707-61-24

info@reimax.ru

обновить