Современная верстка садекватными трудозатратами

Максим Тимохин, технолог, Интерлабс

19 апреля 2013

1 / 30

ПроблемаТребования к верстке постоянно растут, а вместе с ними исебестоимость проекта:

• адаптивность: был один дизайн, а стало N;• кроссбраузерный CSS3;• улучшенная типографика.

На что обратить внимание в технологическомпроцессе, чтобы сократить издержки?

2 / 30

Главная беда дизайна

«Дизайн сайта — набор страниц»адаптивный дизайн только усугубляет проблему:

• на уровнe CMS: единая контентная область, WYSIWYG.• на уровнe дизайнера: главная и рабочая страницы и т.д.• на уровне клиента: сделайте точно так, как я хочу.

Дизайн сайта — система компонентовCMS — часто ограничивающий фактор

3 / 30

Работа с дизайнерамиРеализация адаптивного дизайна будет проще, если:

• мыслить в контексте всего сайта, а не отдельной страницы;• мыслить элементами, образующими визуальный язык;• понимать технологические ограничения;• использовать сетки и вертикальный ритм;• минимизировать количество и варианты блоков;• понимать, что pixel-perfect дизайн невозможен.

Звучит банально, но менять стереотипы тяжело.

4 / 30

Типографская сетка

5 / 30

Типографская сеткаВ обычном дизайне полезна, в адаптивном — необходима:

• различные виды сеток (%, px) для адаптивных вариантов;• различная размерность сеток для адаптивных вариантов;• не больше двух-трех сеток на медиа-вариант;• сетки для всего сайта, а не для отдельных страниц;• несложно реализуется CSS-препроцессором.

Результат формализованное горизонтальноепозиционирование блоков в различныхадаптивных вариантах.

6 / 30

Комбинирование сеток

7 / 30

Сетка: % или px?

• пиксельные сетки технологичнее и проще;• фиксированные адаптивные вариантыменее затратны в реализации;

• процентные сетки универсальные, носложнее: размеры вложенных элементов,ошибки округления и и.д.

• процентные сетки необходимы нанебольших мобильных разрешениях.

8 / 30

Вертикальный ритм

9 / 30

Вертикальный ритмЕдиный шаг для вертикальных размеров элементов:

• вертикальные отступы;• вертикальный размер изображений и блоков;• элементы переменной высоты — в контейнер;• выбор шага определяет baseline для основного шрифта;• легко реализуется CSS-препроцессором.

Результат улучшение внешнего вида страницы,системность в выборе размеров, возможностьварьирования на этапе разработки.

10 / 30

Дизайн: антипаттерныОсновные проблемы адаптивной верстки — на этапе дизайна:

• «над этим я не думал, разберемся при верстке»;• подгонка сетки к уже отрисованному дизайну;• единая сетка для всех блоков с массой исключений;• нарушение порядка блоков в различных вариантах;• расчет на ограниченный размер контента;• избыточный второстепенный контент в начале страницына мобильном устройстве;

• избыточное использование таблиц и сложныхинтерактивных элементов.

11 / 30

Роль верстальщикаВерстальщик необходим, но в новых условиях долженэволюционировать:

• «страничная» CMS — неизбежная верстка контента;• верстка шаблонов страниц;

• верстка компонентов, в т.ч. типовых контентных блоков;• клиентский JavaScript;• минимальное участие в клиентском контенте за счетиспользования типовых контентных блоков.

Верстальщик→ Развитие CMS→ Frontend-developer12 / 30

Прототипирование версткиMaster page – минимальный статический прототип для простыхсайтов:

• одна страница со всеми интерфейсными компонентами;• HTML с минимальной (php,node. . . )-шаблонизацией;

• можно использовать как style guide;• упрощает выявление конфликтов между компонентами;• упрощает тестирование на мобильных устройствах.• поощряет минимализм (хотя иногда уже поздно) ,

13 / 30

Структура CSS-классов

• БЭМ1 — большие проекты, набор общих блоков;• у нас — небольшие проекты с сильно отличающимсядизайном, используем сильно упрощенный вариант.

Главное: независимость блоков друг от друга и ихструктурирование внутри проекта.

• префиксная система имен классов;• упрощенная концепция блок-элемент-модификатор.

1http://ru.bem.info/method/14 / 30

Префиксная система имен

namespace-...-block-element-subelement-...--modificator

• модификатор всегда используется с основным классом• модификатор не разбивается на пару «свойство-значение»• разработчик может вводить промежуточные пространстваимен, отсутствие конфликтов между ними — на его совести;

Результат стандартизируем имена классов, исключаемконфликты между своими и чужими классами.

15 / 30

Структура блоков версткиИспользуем наиболее подходящую семантическую основу,большая часть стилизации с помощью классов стандартнойструктуры.

<class="app-menu"><ul>

<li class="menu-item"><a href="#">...</a></li><li class="menu-item menu-item--sel"><a href="#">...</a></li>

</ul></div>

Результат семантическая верстка, стандартная структураблоков.

16 / 30

Генерируемый кодГенерация кода необходима при разработке клиентской части:

• генерация CSS из более высокоуровневого кода;• минимизация количества и объема CSS-файлов;• структурирование и оптимизация JavaScript-кодасредствами AMD/RequireJS2 и т.д.

Результат снижение затрат на поддержку и развитиестарых проектов, повышение качества новых.

2http://requirejs.org17 / 30

Простейшая генерация кодаК любому проекту можно добавить генерацию кода, есть многомодных инструментов, но проще всего — make:

www/css/%.css: src/less/%.lesslessc $< > >@

Для существующего проекта просто переносим CSS-файлы вsrc/less/ и получаем преимущества в виде переменных,макросов и т.д.

Результат сокращаем код, постепенно рефакторим CSS,если надо — приводим в чувство JavaScript ,

18 / 30

Выбор CSS-препроцессора

• основные претенденты: SASS, LESS, Stylus;• SASS — логично, если решение на Ruby;• Compass – полезно, даже если не использовать SASS;• Любой CSS-файл – валидный исходник на LESS;• LESS распространеннее, Stylus функциональнее изкоробки;

Мы выбрали LESS, Stylus тоже хороший выбор.

19 / 30

Особенности LESS

• полная синтаксическая совместимость с CSS;• вложенные пространства имен, удобноj для библиотек;• нет условий и циклов, но есть pattern matching и рекурсия;• динамическое формирование имен классов, хотя издокументации это неочевидно.

Главное не генерировать избыточный CSS, в клиентскомкоде максимально используем определениеклассов, а не макросов.

20 / 30

LESS-фреймворк

• тривиальная часть — CSS3, шрифты и т.д.• инициализация верстки: reset или normalize, чаще второе;• медиа-варианты и версии для браузеров без Media Query;• генерация сеток, средства отладки;• базовые настройки отображения элементов форм;• всевозможные костыли для IE.

Результат типовые решения для всех проектов, упрощениеподдержки, снижение порога вхождения дляразработчиков.

21 / 30

Файлы проекта

• правила CSS группируются в файлы произвольно;• фреймворк подключается одним @import;• каждому результирующему CSS-файлу соответствуеткорневой less-файл, подключающий фреймворк и другиеless-файлы;

• корневых файлов может быть несколько: под разныеразрешения, разные версии IE и т.д

Результат правила можно группировать покомпонентно,строить библиотеки компонент и т.д.

22 / 30

Медиа-варианты@boot-media-variants: 9; // количество диапазонов;...@boot-media-3-name: tablet; // определение диапазона;@boot-media-3-min: no; // есть стандартные, но@boot-media-3-max: 767px; // можно переопределить@boot-media-3-ie: no; // если необходимо....#media { // стандартный namespace

.for(all) {// общие правила

}.for(tablet) {

// правила для планшета}

} // результат можно вывести в отдельные файлы или общий файл

Результат покомпонентное определение вариантов, генерациявариантов в оптимальном порядке и варианта без MQ.

23 / 30

Элементы форм• в разных проектах выглядят совершенно по-разному;• при этом общие проблемы взаимного позиционирования,размеров и т.д;

• проблема использования готовых решений типа Bootstrap– геометрия и внешний вид неразделимы.

Решение: • базовыe классы – позиционирование;

• стандартные макросы – геометрия;

• оформление – свое в каждом проекте.

• оформление и размеры – модификаторы.

24 / 30

Поддержка IE// В файлах компонент.#ie {

.for(7) { /* правила для IE7 */ }

.for(lt9) { /* правила для IE8 */ }}

// В результирующем файле#boot > .classes(ie, 7);

Также с осторожностью используем некоторые полифиллы, вчастности PIE3 (CSS3) и boxsizing4 (border-box).

3http://css3pie.com4http://github.com/Schepp/box-sizing-polyfill

25 / 30

Сетки@grid-desktop-variant: fixed; // пиксельные и процентные@grid-desktop-class: g-d; // префикс CSS классов:@grid-desktop-size: 12; // g-d-r,g-d-s4, g-d-o2.@grid-desktop-column: 60px;@grid-desktop-gutter: 20px;

#media {.for(desktop) {

#boot > #grid > .classes(grid-desktop);}.for(wide) {

#boot > #grid > .classes(grid-wide);}

}

Результат автоматическая генерация классов сеток,реализация адаптивных сеток, возможностьбыстрой корректировки геометрии сеток.

26 / 30

Инициализация блокаГлобально используем normalize, внутри отдельного блокавыполняем по необходимости reset для семантической базыблока:

.app-menu {#boot > .reset(ul, left); // локальный reset#boot > .rhythm(15px, margin, 1, 0); // baseline для 15px

// margin-top в 1 шаг.app-menu-item {

// padding в 1 шаг и корректировка для border#boot > .rhythm(padding,1,1,1px,1px);border: solid 1px #ccc;

}}

27 / 30

Инициализация верстки

1 определяем основной размер шрифта и вертикальный шаг;2 переопределяем настройки типографики если нужно;3 определяем диапазоны медиа-вариантов;4 конфигурируем сетки в различных медиа-вариантах;5 верстаем нестилизованные блоки с классами блоков иячеек сетки;

6 проверяем раскладку в различных разрешениях,контролируем границы блоков;

7 дальше разбираемся со стилизацией каждого блока.

28 / 30

ИтогоЧто необходимо сделать, чтобы технологический процесс быладекватен современным требованиям к верстке?

• работать с дизайнерами: компонентный подход,стандартные паттерны, технологические ограничения;

• стандартизировать структуру разметки и CSS-классов;• использовать адаптивные типографские сетки;• внедрить генерацию клиентского кода вообще иCSS-препроцессор в частности;

• реализовать набор типовых решений с помощьюCSS-препроцессора.

29 / 30

http://www.interlabs.ru