Хорошая верстка в LESS: как? дружественные советы о том, как хорошо сверстать сложный макет

Здесь собраны некоторые рекомендации по верстке макетов дизайна с использованием LESS. Они годятся для проектов, где необходимо сверстать сложный макет дизайна с использованием CSS-фреймоворка и LESS препроцессора.

Эта статья рассчитана на подготовленного читателя, знающего основы веб-верстки.

Именование классов

• используйте префиксы в названиях своих классов. Префиксы нужны для того, чтобы сразу было понятно, чей это класс -- наш, или от фреймворка или CMS?
• не переопределяйте чужие классы, а добавляйте свои. Сохраняйте обратную совместимость. Используйте принцип Капусты.
• давайте говорящие названия. Так, чтобы было максимально точно ясно функциональное назначение элемента.

Пример:

 .ph-mainmenu-opener { ... } /* этот наш класс, и он описывает то, что открывает главное меню */

В недостижимом идеале, весь ваш код должен быть в одном LESS-файле, а все классы в нем должны иметь префикс.

Принцип Капусты:

• Проверка №1: удалите LESS-файл, и дизайн должен вернуться обратно к дефолтному (от CSS-фреймворка).
• Проверка №2: удалите класс со своим префиксом из любого элемента, его дизайн должен вернуться к дефолтному.

Избегайте дублирования кода, применяйте принцип Капусты

Длинный повторяющийся в дизайне класс разбивайте на два: в одном базовые свойства, во втором их «патч» для данного конкретного места применения. Далее, при верстке похожего дизайна применяйте снова те же базовые свойства, и новый локальный «патч» к ним.

Пример: если вы верстаете два меню, оба очень красивенькие и отличающиеся только одним свойством, принцип Капусты реализуется так:

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

Не плодите сущности: создавайте необходимый минимум классов

По-умолчанию, не надо делать так:

 <ul class='ph-menu'>
 <li class='ph-menu-item'> ... </li>
 </ul>

Лучше стремиться делать так:

 <ul class='ph-menu'>
 <li> ... </li>
 </ul>

Всегда можно описать вложенные элементы, используя каскадный принцип CSS (кстати, кто не в курсе, расшифровывается как Cascading Style Sheets). Это тоже принцип Капусты, в каком-то смысле.

Используйте классы-модификаторы, определенного вида (например, .ph-MOD-* )

Они похожи на unix-утилиты. Каждый выполняет только одну задачу, ясную из его названия. Например, .ph-MOD-underliner делает текст подчеркнутым.

Примеры:

 .ph-MOD-underliner { text-decoration: underline; }
 .ph-MOD-mamonter { font-family: Mamontov Regular; ... }     // назначает шрифт mamontov
 .ph-MOD-h1er { ... }        // делат блок таким же, как h1

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

LESS: объявляйте общие переменные и mixins

Переменные -- для хранения значений, они должны быть короткими и хорошо запоминаться. Mixins -- более сложные конструкции, содержащие целые CSS-свойства. Используйте mixins для всех элементов, поведение которых должно быть схоже. Например, для описания :hover.

Так как это переменные, существующие только в контексте LESS-файла до его компиляции, можно не заморачиваться на префиксы:

 @grey: #555; // темно-серый
 @border-radius: 15px;
 .common-hover-effect { opacity : 0.8;}

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

Импорт css/less файлов внутрь LESS:

Что произойдет при компиляции:

• если вы импортируете файл как .css, его код не будет интегрирован в выходной css, он так и останется внешним подключаемым файлом, что создаст лишнее обращение к серверу;
• если вы импортируете файл как .less, его код будет скомпилирован, минимизирован и размещен внутри выходного CSS-файла;
• если вы переименуете .css файл в .less, он будет работать как полноценный less (т.к. этот формат обратно совместим);
• если вы переименуете .css файл в .less, а в нем подключается шрифт, это не сработает из-за относительности путей к шрифтам.

Вывод: есть смысл переименовывать css-файлы в less, если внутри нет шрифтов.

Комментарии (1)

Надо стараться разделять один less-файл на несколько заведомо непересекающихся, выбрав хороший критерий. Примеры:

• отделить общий дизайн от контентного;
• выделить дизайн всех автоматически генерируемых листингов;
• выделить дизайн разных разделов сайта в отдельные файлы.

Finar.