Хорошая верстка в 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-файл загромождается и теряет читаемость. Как вернуть ему былую лаконичность?

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

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

Finar.

Блог

Что с Мастерхостом? Когда заработает?!

Этот вопрос всё чаще задают в Интернете начиная примерно с 12:00 дня 2 марта. А всё потому, что он накрылся!

далее

Автоматизированная Система Управления Бэкапами

Автоматизированная Система Управления Бэкапами позволяет добиться полного контроля над резервными копиями сайтов внутри инфраструктуры веб-студии. Если вы поддерживаете десятки сайтов на разных хостингах, без подобной системы вы не можете быть на 100% уверены в том, что каждый из них был корректно зарезервирован прошлой ночью.

далее

WebSocket: интеграция с NetCat

Хотите добавить на сайт под управлением CMS NetCat поддержку технологии WebSocket? Обращайтесь к нам! Посетители сайта смогут получать мгновенные уведомления о событиях сайта без обращений к серверу и перезагрузок страниц. Превратите свой сайт в интерактивную площадку, работающую в реальном времени!

далее

NetCat: техническая поддержка и доработка сайтов

Мы работаем с CMS NetCat уже больше 10 лет. У нас большой опыт и ответственный подход к делу.

далее

Весь блог тут