Вёрстка макетов: основные требования + почему мы используем Compass и Sass

Зачем нам лишние надстройки над CSS

Web технологии в их привычном понимании меняются достаточно редко. Новые стандарты HTML и CSS мучительно и долго обсуждаются, разрабатываются и появляются уже тогда, когда их лет пять как ждут web разработчики, выдумывая по ходу работы «костыльки» и нашпиговывая макет javascript-заменителями.

Когда-то и мы верстали в блокноте…однако, все меняется. Мы не сразу стали сторонниками CSS фреймворков, но около года назад (а может чуть больше) пришло время признать, что без этих технологий верстка будет не совсем полноценной (или очень долгой в разработке).

Итак, чтобы работа шла легче, быстрее, а верстка была профессиональнее (более масштабируемой, компактной, отвечающей всем запросам современных технологий и больших проектов), находчивые и предприимчивые программисты/верстальщики начали выдумывать для себя различные удобные инструменты. Их достаточно большое количество. Есть надстройки над HTML для упрощенной генерации кода, есть препроцессоры для более эффективного CSS (а сейчас еще появляются и постпроцессоры).


Sass, Less и другие метаязыки на основе CSS

Итак, нам повезло и мир уже увидел крутые CSS-препроцессоры. Они уже активно развиваются, появляются плагины, миксины и всякие-всякие туториалы по их использованию. Появились всякие там Sass, Less и Stylus… Они различны по синтаксису и способу генерации конечного CSS файла (в следствии и эффективность конечного CSS файла может отличаться). Как же теперь выбрать что-то одно в этом разнообразии и стоит ли вообще это делать?

Для начала надо сказать, что нужно тщательно подходить к выбору инструментов для верстки. И да, периодически их придется менять, но не «прыгать» с одного на другое.  Если уж выбираешь CSS-препроцессор, то один. Совершенствуешься в рамках выбранного инструмента, нарабатываешь готовые эффективные решения и так далее. Решение использовать другой препроцессор должно быть подкреплено очень вескими причинами (например, стандарты компании, в которой вы хотите работать или появление инструмента на порядок эффективнее вашего).

Критерии при выборе CSS-препроцессора

В ходе долгих интернет-компаний, чтения различных сравнений и документации, некоторое время назад в нашей компании было принято решение использовать Sass в качестве CSS-препроцессора. Мы не будем здесь долго описывать наши аргументы за Sass, однако отметим пару ключевых моментов, на которые мы обращали внимание при выборе:

  • Качество генерируемого CSS файла
  • Простота и органичность синтаксиса
  • Распространенность (что влияет на количество готовых расширений, плагинов и просто полезных туториалов)
  • Наличие и качество CSS фреймворка для препроцессора

CSS фреймворки

CSS препроцессоры предполагают, что вы будете из файла препроцессора генерировать готовый CSS. Это, как правило делается в командной строке. Каждый раз ручками компилировать код неприятно, даже если это всего лишь пару лишних движений. Так вот и здесь есть упрощение: CSS фреймворки, на лету компилирующие код (у них есть и другие преимущества)

Для Sass — это очень удобный CSS Framework Compass. В сети полно документации. Именно с ним мы и работаем.

А как же Twitter Bootstrap

Возможно, многие слышали про этот фреймворк. И уж точно с ним все сталкивались в различных проектах в качестве пользователя. Он очень распространенный и удобен для внедрения стандартных интерфейсов, где не хочется тратить большие деньги на дизайнера (например, какая-нибудь административная панель или документация к проекту).

Но Bootstrap и Compass это не одно и то же. Грубо говоря, Бутстрап — это набор готовых виджетов, кнопок, колонок и так далее. И для полноценной работы, для верстки любого проекта любой сложности он плохо подходит.

К тому же, для Compass уже выпущено не одно дополнение,собирающее в себе те самые полюбившиеся кнопочки, виджеты и таблички из Bootstrap. Просто вводите в поиске «Bootstrap Compass» и готово!

Для фреймворка Compass вообще уже сделано очень много дополнений в виде организации сетки страницы на любой вкус (Susy , 960Grid и другие), готовых стандартных UI элементов в различных наборах и имитирующих другие фреймворки (тот же Bootstrap, YUI),  кроссбраузерных RGBA и многое другое. К тому же вы вполне можете написать свои миксины и виджеты. Это существенно экономит время верстки и действительно зачастую улучшает качество кода.


Некоторые требования к верстке в нашей компании (Compass в помощь)

Итак, как вы уже поняли, различные надстройки над CSS и надстройки над настройками дают много преимуществ. А, если использовать их без особого фанатизма и с умом, будет вообще красивый и минимизированный код. Для этого нужно постоянно учиться, читать документацию и думать как же улучшить свою работу. Однако, все не так сложно как кажется, нужно лишь начать :)

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

  • Оптимизация CSS кода:
    — Объединение элементов с одинаковыми свойствами
    — Минимизированная версия CSS
    — Избирательное использование вендорных префиксов (только тех, что есть для определенного CSS свойства. См. статью)
  • Оптимизация HTTP-запросов при загрузке страницы:
    — Спрайты для всех иконок, мелких графических элементов (с помощью фреймворка работа с ними гораздо эффективнее)
    — Некоторые изображения в не спрайтов желательно встраивать в CSS (см. статью про DATA:URL)
  • Верстка для ретины:
    — Фоны, иконки, основной логотип должны быть векторными (SVG + fallback для старых браузеров или иконочные шрифты в зависимости от макета).
  • Кроссбраузерность:
    — Используем принцип «изящная деградация»: сохраняем работоспособность верстки в старых браузерах, но делаем естественные fallback’и (то есть, если SVG не поддерживается, вставляем растр; если браузер не умеет воспроизводить тень для текста и скругленные углы, не воспроизводим их дополнительными библиотеками, НО сайт должен выглядеть аккуратно и в старых браузерах).
    — Используем преимущества CSS3 и CSS4: в рамках дополнительного оформления — смело (css transitions, к примеру); для особых CSS селекторов, animation и других элементов, которые могут повлиять на конечное отображение верстки — используем проверку Modernizr и fallback (какой именно зависит от ситуации).

Мы всегда открыты для новых знаний, современных технологий и периодически меняемся, шагая в ногу со временем. Никогда не стыдно в чем-то заблуждаться или не знать, стыдно не учиться и не развиваться :)


Полезные материалы для начала:

CSS-препроцессоры: из каменного века — в будущее — небольшая презентация на сайте Yandex

SASS против LESS — выбор препроцессора, неплохая агрументация

Почему Sass? — неплохой перевод вводной статьи, для тех, кто боится начать изучать :) Обратите внимание, на сам ресурс — если вы не знаете английский, он для вас: много переводов неплохих зарубежных статей

Изображения в верстке. Хватит это терпеть — про растр и вектор в верстке, обзорно-убеждающая статья

Плейлист с хорошим обзорно-обучающим курсом Sass (на английском) — обратите внимание на весь канал: там достаточно просто и хорошо объясняются начальные вещи во многих web технологиях.

Оф. сайт Sass (там есть документация)

Оф. сайт Compass (там есть документация)

Комментарии: