Верстка и 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

Email

info@reimax.ru

Написать сообщение

обновить