We love CSS

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

Для начала приведу пример из жизни любого верстальщика — вы верстаете обычный сайт, три странички — главная, новости и контентная. Все вроде бы отлично, и в даже в IE6 все держится отлично. Вы отдаете верстку программистам, программисты привязывают движок, сайт работает и все счастливы.

Но через пару дней, когда контент-менеджер Ксюша начинает заполнять сайт контентом, начинаются проблемы. Текст смотрится не так как хотелось клиенту, таблицы почему-то без рамок, заголовки размером с обычный текст, а про списки мы промолчим. Благо сайт не летит вкривь и вкось (вы же крутой верстальщик, ваша сетка непоколебима). И тут возникает вопрос, кто виноват? Дизайнер, верстальщик, программист или все-таки Ксюша?_*

Правильный ответ — виноват менеджер проекта

На самом деле, во всем это виноват верстальщик, который сверстал как есть и не спросил дизайнера, а как будет выглядеть таблица, списки и т.д. Да, да именно верстальщик, так как дизайнер может и знать не знает о волшебных blockquote, ul li.

Поставив стандартный Lorem ipsum, он не задумывается о множестве других элементов. Сознательные дизайнеры, которые продумали все возможные поведения контента и блоков, давно занесены в красную книгу. Либо они довольно опытные верстальщики, так как сознательных верстальщиков тоже мало.

С этими проблемами, как компания специализирующаяся на верстке, мы неоднократно сталкиваемся. И каков выход из положения? Об этом и поговорим.

Reset.css

Большинство верстальщиков используют reset.css, так называемый ластик, обнуляющий стандартные стили браузера. Мы не исключение, так как считаем это действительно удобным инструментом, хотя это довольно «холиварная» тема.

Большая часть проблем с его использованием и возникает. Жирные текст не становится жирным, курсив не становится курсивом и т.д. Но, все таки, удобство reset.css приоритетнее (пусть это пока будет фактом). Мы начинаем писать reset 2.0, т.е. в блоках с контентом мы заново отменяем предыдущий ластик.

Reset 2.0

Небольшой пример:

1. ARTICLE SUP {
2. vertical-align:super;
3. }
4.  
5. ARTICLE STRONG, ARTICLE B {
6. font-weight:bold;
7. }
8.  
9. ARTICLE EM, ARTICLE I, ARTICLE CITE {
10. font-style:italic;
11. }

Казалось бы, зачем делать лишнюю работу. Но, даже если бы и не было reset.css, эту работу все равно бы пришлось делать, отменяя неправильные отступы у абзацев и заголовков (и многое другое). Так что этот труд не безосновательный.

Решение тривиальное — для контентных блоков мы пишем «reset 2.0», со списком всех нужных элементов.

Мы составили свой список, тех элементов, который наиболее часто встречается в контенте. Возможно у вас есть похожий. Давайте делится.

1. <article role="main">
2. <h2 class="title">Заголовки</h2>
3. <h1>Заголовок H1</h1>
4. <h2>Заголовок H2</h2>
5. <h3>Заголовок H3</h3>
6. <h4>Заголовок H4</h4>
7. <h5>Заголовок H5</h5>
8. <h6>Заголовок H6</h6>
9. </article>

По ссылке полная версия.

Мы нагло исключили некоторые элементы, например acronym, который признан устаревшим. Или например dfn, который чересчур специфичен. Также мы не учитывали формы и инпуты.

Мы не первые в этом начинании. Пример шаблоны для Wordpress обязательно тестируют контент — http://wordpress.org/extend/themes/. Также похожая система существует у любого CSS фреймворка.

В качестве бонуса мы добавили ::selection и outline. Как говорится, время диктует свои правила.

С такой системой работать с контентом одно удовольствие. Вот еще один «живой» пример

Подозреваю, данный шаблон будет постоянно обновляться.

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

P.S.

Дизайнерам

Не забывайте, что контент это не только абзац с Lorem ipsum и ссылки. Это множество элементов и связей между ними. Об этом нужно думать.

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