CSS Framework
своими руками. Теория

Виталий Харисов

Руководитель группы HTML-вёрстки

Субботник, Москва, 31 января 2009 года

Что такое CSS Framework

Набор компонент позволяющий

• собрать сайт за меньшее время
• менять разные сайты быстрее

Требования к framework'у

Модульность

• можно использовать по частям
• сложные компоненты делаются из простых, атомарных компонент

Требования к framework'у

Гибкость

Компоненты не зависят от режима рендеринга (Quirks Mode / Standards Mode)

Требования к framework'у

Кроссбраузерность

• делаем по стандартам
• для MSIE 7 и ниже подставляем костыли

Требования к framework'у

Пуленепробиваемость

Компоненты

• независимы от окружения
• логичны без скрипта
• доступны без картинок
• хорошо выглядят при разном размере шрифта

Требования к framework'у

Расширяемость

• вёрстка по однозначным правилам
• возможны сотни компонент
• без увеличения сложности разработки

Независимые блоки

Где прочитать подробнее

vitaly.harisov.name/article/independent-blocks.html

Независимые блоки

Что это?

• Разбиваем страницу на непересекающиеся фрагменты
• Они могут вкладываться один в другой
• У каждого фрагмента своя разметка и стили
• Это и есть «независимый блок»
• У каждого блока есть имя
• Блоки как маленькие, так и большие

Независимые блоки

Условия независимости

• Минимум глобальных стилей
• Не используем id, только class
• Имя блока начинается с префикса
  (вместо .mega-block используем .b-mega-block)
• Нет классов вне блоков

Независимые блоки

Префиксы

Нам достаточно b- (block)

Независимые блоки

Модификации

• Один блок может выглядеть по разному
• Решаем проблему дополнительным классом

Рассмотрим на примере.

Независимые блоки

Модификации. На примере

• Пусть у нас есть блок b-mega-block
• Нам нужны его модификации super и hyper
• Дополнительные классы b-mega-block_super и b-mega-block_hyper

<div class="b-mega-block b-mega-block_super"

• Основные стили в b-mega-block
• Дополнительные в b-mega-block_super

Блок в файловой системе

Каждому блоку по директории

block/
    b-round/
        b-round.css

Блок в файловой системе

Каждому блоку по директории

block/
    b-round/
        b-round.css
        b-round.html

Блок в файловой системе

Дополнительные стили

Выносим в отдельные файлы.

b-blah.optional-styles.css

Блок в файловой системе

Дополнительные стили: .ie

Исправления для MSIE7- выносим в файл .ie

block/
    b-round/
        b-round.css
        b-round.ie.css

Блок в файловой системе

Дополнительные стили: .ie

Внутри пишем

       .b-round { ... } /* Все MSIE */
* html .b-round { ... } /* MSIE 6 и ниже */
* html*.b-round { ... } /* MSIE 6 */
[class].b-round { ... } /* MSIE 7 */

Блок в файловой системе

Дополнительные стили: .reset

• По умолчанию предполагаем global reset (ластик)
• На старых проектах нет global reset
• global reset невозможно использовать
  (например, в webmail)

Блок в файловой системе

Дополнительные стили: .reset

block/
    b-round/
        b-round.css
        b-round.reset.css

Блок в файловой системе

Модификации блока

• Выносятся в директорию _тип-модификации
• Внутри файлы b-blah_модификатор.css
  (+ .ie и .reset)

Блок в файловой системе

Модификации блока

В поисковой шапке Яндекса блок b-head-search

Блок в файловой системе

Модификации блока

Модификатор double

b-head-search/
    _type/
        b-head-search_double.css
        b-head-search_double.ie.css

Блок в файловой системе

Модификации блока

b-round/
    _radius/
        b-round_2.css
    _border/
        b-round_edaeda.css
        b-round_edaeda.ie.css
    b-round.css
    b-round.ie.css
    b-round.html

Блок в файловой системе

Опциональные элементы

Необязательная разметка

• в отдельные вложенные директории и файлы
• подключается только там где надо

Рассмотрим на примере.

Блок в файловой системе

Опциональные элементы

На примере блока b-head-search

Блок в файловой системе

Опциональные элементы

На примере блока b-head-search

b-head-search/
    b-head-search.css
    b-head-search.ie.css

Блок в файловой системе

Опциональные элементы

Ссылка на расширенный поиск

b-head-search/
    advanced/
        b-head-search.advanced.css

Блок в файловой системе

Опциональные элементы

Ссылка на расширенный поиск

Отсутствует в шапке на Маркете

Блок в файловой системе

Опциональные элементы

Пример запроса

b-head-search/
    sample/
        b-head-search.sample.css
        b-head-search.sample.ie.css
        b-head-search.sample.reset.css

Блок в файловой системе

Опциональные элементы

Пример запроса

Отсутствует в шапке на Поиске

Собираем всё вместе

Подключаем framework на проект

Рассмотрим структуру типичного сайта

site/
    css/
        style.css
    index.html

Собираем всё вместе

Подключаем framework на проект

Добавляем framework

site/
    css/
        style.css
    framework/
        block/
            b-icon/
                b-icon.css
                b-icon.ie.css
    index.html

Собираем всё вместе

Подключаем framework на проект

• Мы используем SVN
• Подключаем через svn:externals

Собираем всё вместе

Проектные стилевые файлы

• Минимум два: style.css и style.ie.css
• Используя @import подключаем нужное

Собираем всё вместе

Проектные стилевые файлы

style.css

@import "../framework/block/global/global.css";

@import "../framework/block/b-icon/b-icon.css";

a:link
{
    color: #00e;
}

...

Собираем всё вместе

Проектные стилевые файлы

style.ie.css

@import "style.css";

@import "../framework/block/b-icon/b-icon.ie.css";

Собираем всё вместе

Подключаем стили в HTML

<!--[if gt IE 7]><!-->
    <link rel="stylesheet"
          href="css/style.css"/>
<!--<![endif]-->

<!--[if lt IE 8]>
    <link rel=stylesheet
          href="css/style.ie.css">
<![endif]-->

Один HTTP-запрос во всех браузерах.

Собираем всё вместе

Сборка стилей

• Разрабатывать можем
• Идти с этим в люди нет
• Надо сделать два файла
• Заменяем @import на содержимое файла
• При разработке style.css / style.ie.css,
  на хостинге _style.css и _style.ie.css

Собираем всё вместе

Сборка стилей. Подводные камни

Свинья от Microsoft

• Не более 32 @import'ов в одном CSS файле
• Глубина вложенности @import'ов не больше 3-х
• Максимальный объём CSS кода примерно 250 килобайт

Собираем всё вместе

Сборка стилей. Подводные камни

Обходим ограничения

• Просто, но утомляет:
  всегда использовать собранные стили
• Чуть лучше:
  импорты по 32 штуки в отдельные файлы
• Наш путь:
  сборка стилей через fast-cgi модуль

Подведём итог

• Делаем компоненты нужные на разных проектах
• Удовлетворяем требованиям
• По однозначным правилам

Виталий Харисов

Руководитель группы HTML-вёрстки

vitaly@yandex-team.ru