Я иногда сталкивался с тем, когда web-программист не знал CSS или, скорее, не хотел заниматься облагораживанием своего HTML, который являлся результатом работы разрабатываемого им скрипта. Это натолкнуло меня на мысль, что ему (программисту) не помешало бы иметь при себе некоторое средство для создания «красивых» страниц. Средство должно было бы включать в себя некоторый CSS, возможно, картинки, и подключаться к любому HTML (очевидно, созданному по некоторым определённым правилам). При этом смена CSS (и картинок) на альтернативные не должна была бы приводить к семантически некорректному отображению.Вышеобозначенные требования очень похожи на требования к составлению скина для какой-либо системы (в частности, CMS). Но, в отличие от скина, который заточен под конкретный HTML, в нашем случае хотелось бы максимально упростить правила написания HTML, чтобы разработчикам не нужно было держать в голове много сложных правил.
Таким образом, оговаривая некоторые (небольшие) ограничения на HTML, мы с одной стороны гарантируем программисту, что его код, генерируемый с учётом этих правил, будет корректно оформлен любым сделанным для этих целей CSS, а с другой стороны, оговариваем шаблон изготовления самих этих CSS.
CSSL (CSS Library) — так будет называться наша концепция. Она представляет собой CSS-фреймворк. Основная его задача — позволить не-дизайнеру и не-верстальщику при разработке своей HTML страницы иметь средство гарантированного её «облагораживания». При этом подразумевается, что результат применения соответствующего CSS должен быть расширен дополнительным CSS, если требуются не совсем стандартные стили.
Итак, приступим.
Будем нести основную мысль: программисту не нужно помнить специфических классов и конструкций. Только теги. Будем использовать богатство тегов HTML5, для совместимости — классы, совпадающе с именами тегов.
| Тег[.класс] | Использование | |
|---|---|---|
| HTML4 | HTML5 | |
| Во что оборачивать содержимое: | ||
| div.wrapper | Обёртка всей страницы | |
| div.header | header | Шапка, заголовочный блок |
| div.footer | footer | Подвал, нижний блок |
| div.section | section | Основое содержимое |
| div.article | article | Статья, текстовый блок |
| Типовые структуры: | ||
| ul | Последовательность подобных блоков | |
| div.article ul, li | article ul, li | Маркированный и нумерованный списки |
| dl, dt, dd | Список определений | |
| ul.menu, ul.menu li | menu, menu li | Меню, навигация |
| table, tr, td, th, thead, tfoot, tbody, caption | Таблица | |
| form, fieldset, legend, input, input.text, input.radio, input.checkbox, input.file, input.submit, input.reset, button, textarea, label, select, option, optgroup | Форма | |
| Специальные структуры: | ||
| div.aside | aside | Примечание |
| blockquote | Цитата | |
| Внутри блоков: | ||
| h1, h2, h3, h4 | Заголовки | |
| p, ol, ul, address, div.copyright | Параграф, списки, адрес, копирайт | |
| a, a.no_reload, a.logo, a:hover, a:visited, a:active, em, strong, cite, del, ins | Ссылки, выделения текста | |
Теперь то же самое подробнее:
Начнём с самого простого — с инлайновых элементов: a, b, i, em, strong, strike, cite, del, ins, sub, sup. Часть из них (b, i, strike, sub, sup) несут только визуальную нагрузку, поэтому прописывать стили для них не будем. Другие (a, em, strong, cite, del, ins) несут также смысловую нагрузку и поэтому для них следует определить специфические стили. Элемент a нуждается в определении псевдоклассов a:hover, a:visited, a:active, а также специального класса для обозначения ссылок, работающих без перезагрузки страницы (AJAX), например, a.no_reload.
Теперь определим элементы, которые определяют основные блоки страницы. Div.header является контейнером, который содержит вспомогательную информацию, распологаемую до основного значащего содержимого. Div.footer (или footer в HTML5), соответственно, информацию, располагаемую после основного значащего содержимого. Div.section (или section в HTML5) содержит основной контент. Ожидается, что секций на странице может быть несколько. Для навигации используется ul.menu (или menu в HTML5), который содержи элементы li со ссылками, текстом или навигационными структурами внутри, то есть подразумевается вложенность навигации. Активный пункт меню — li.active. Всё содержимое страницы должно быть обёрнуто в div.wrapper, который задаёт ширину, поля, положение контента.
Должны использоваться следующие заголовки: h1 для логотипа или названия раздела сайта (на странице должен (по возможности) присутствовать в одном экземпляре), h2 для заголовков секций (количество должно совпадать с количеством секций), h3 для заголовков блоков и структур, h4 для заголовков в пределах блока структуры.
Теперь обсудим типовые структуры, используемые при отображении информации. Первая структура — это обыкновенная таблица. Для её форматирования используются следующие теги: table, tr, td, th, thead, tfoot, tbody, caption. При задании стилей для заголовков (элементов th) следует понимать, что этот элемент может встречаться как в пределах thead, так и tbody; и так далее. Вторая типовая структура — список элементов, маркированный (ul) и нумерованный (ol). Так как часто ul используется для форматирования каких-нибудь последовательностей подобных структур, имеет смысл не маркировать ul, за исключением того лучая, когда он находится внутри div.article (article), который служит контейнером для текстов. Третья структура — список определений (двойной список) (в отличие от предыдущей структуры, здесь элементом списка является на один блок данных, а два); этот список форматируется с помощью тегов dl, dt и dd. Четвёртая структура — форма. Тег form содержит один или более элементов fieldset, которые содержат остальные элементы: legend, input, textarea, label, select, option, optgroup. Элемент label должен использоваться в «неэкономичной» манере, то есть ассоциированный с ним элемент (input, textarea) не должен в нём содержаться (для большей гибкости форматирования). Для оформления кнопок, относящихся к форме, следует использовать input; элемент button не должен применяться внутри форм, его назначение — действия, активируемые с помощью JavaScript. Для элемента input следует определить оформление для элементов input разного типа (input.text, input.radio, input.checkbox,input.file, input.submit, input.reset). Пятая структура — колонка; заключается в div.sidebar, может содержать блоки информации, меню и др., должна находиться перед div.section (section).
Для форматирования цитат, содержащих много текста, следует использовать blockquote; возможны вложенные цитаты. Примечание, подсказка или подобное содержание должно быть заключено в тег div.aside (aside в HTML5). Div.article (article в HTML5) следует применять, когда нужно выделить или отделить (обернуть) большой объём текстовой информации.
Просуммировав вышесказанное, получим
- инструкцию для человека, кто собирается писать HTML-код, совместимый с CSSL
- базовый (пустой) CSS, который будет являться заготовкой для написания CSS-шаблонов.
Я написал несколько заготовок, чтобы проиллюстрировать вышесказанное:
А вот как выглядит CSSL в действии:
 Чистый HTML |
 Тот же HTML, только раскрашенный |
 Ещё один вариант, раскрашенный с применением CSS3 |
В отличии от других CSS-фреймворков:
- Ориентирован на употребление с чистым html, не нужно заучивать много классов.
- Ориентация на использование с современными браузерами (HTML5, CSS3). Для IE6 и т.п. — graceful degradation.
Итог.
Цель данного поста — получить отклик от:
- программистов, кто будет в этом заинтересован. Если такие найдутся, значит это актуально.
- дизайнеров, кто не против посотрудничать. Итогом сотрудничества должна стать некоторая библиотека css-файлов, которую смогут использовать все желающие.
- верстальщиков, кто мог бы конструктивно высказаться)
Спасибо.
PS. Мой щебетун, jQuery API cheat sheet.
