Принципы верстки сложных сайтов под NetCat (альфа-версия)

Требования к именованию классов:

По исходному коду элемента понимать следующее:

1. в каком LESS-файле это описано
2. в каком шаблоне компонента это правится
3. в каком шаблоне макета дизайна лежит этот элемент
4. понять, что это наш css-код
5. понять: это обвязка чего-то большого или просто наш класс?

Требования к верстке:

• следует применять на практике принцип наследования свойств CSS, то есть окружать (обвязывать) логические элементы одним общим классом
  • другими словами - стремиться минимизировать объем html-кода
• все наши классы должны иметь префикс "ph-"

Именование сущностей:

Компоненты называем по-латински тогда и только тогда, когда для него имеет смысл создать отдельный less-файл. Например, "Complexes".

Шаблоны компонентов называем по-латински тогда и только тогда, когда для них требуются уникальные стили.

Макеты дмзайна называем как угодно.

Классы обладают префиксом "_", если являются обвязкой для чего-то еще (??)

less-файлы называем с использованием латинского имени сущности. Примеры:

• component-complexes.less | css-код для компонента Complexes
• template-main.less | css-код для Главного макета дизайна

Обвязка компонентов.

Каждый компонент или шаблон компонента (если она назван по-латински) должен быть обвязан двумя классами. Первый класс - совпадает с латинским именем компонента, второй - с латинским именем шаблона компонента. Для самого компонента в качестве второго класса используется постфикс root.

Примеры:

• для компонента Complexes:
  • _ph-complexes
  • ph-complexes-root
• для шаблона компонента Complexes под именем Search:
  • _ph-complexes
  • ph-complexes-search

Пояснение: обвязке подлежат все используемые формы компонента - листинг списка объектов, полный вывод объекта, формы поиска, добавления, изменения и т.д.

Структура файла component-complexes.less

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

Класс ph-complexes содержит те свойства, которые гарантировано будут общими для всех шаблонов. Заполнение класса необязательно (он может быть пустым).

После определения этих общих элементов, следует перечисления уникальных классов для шаблонов компонента (и для класса ph-complexes-root, применяющегося в самом компоненте).

Макеты дизайна

Единственное требование к разбиению CSS-кода макетов дизайна в том, что для каждого ключевого макета дизайна создается отдельный LESS-файл.