Хорошая верстка в 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, если внутри нет шрифтов.

Блог

Хорошая верстка в LESS: как?

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

далее

Хороший веб-дизайн: как?

Photoshop и PSD-файлы были популярны в начале века, а сейчас чтобы создать дизайн сложного веб-сайта практичнее использовать специализированные инструменты. И не только потому, что статические PSD-файлы с трудом справляются с задачей визуализации динамической тянущейся верстки и анимации. Еще и потому, что важно не только нарисовать красиво, но и удобно передать результат верстальщику.

далее

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

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

далее

Поломка админки NetCat 4.7 в Google Chrome и Opera

В современных версиях Google Chrome и Opera, вышедших в прошлом месяце, админка CMS NetCat 4.7 и младше вдруг сломалась. Поломка проявляется в том, что в правой части админки перестала показываться нижняя панель редактирования (там, где кнопки Добавить и прочие), а скролл-прокрутка не осуществляется до конца. Работать с сайтом и добавлять новые материалы не представляется возможным.

далее

Весь блог тут