Руст Кулматов |
В прошлом совете я рассказал о системах именования. Сегодня расскажу о том, что мы применяем в техноконтуре. |
Новый сайт бюро и книги издательства состоят из модулей. Модуль — самостоятельный элемент интерфейса с собственной разметкой, внешним видом и поведением. Модули можно бесконечно вкладывать друг в друга, создавая развороты или страницы любой сложности. Примеры таких модулей: разворот, страница, изображение, сноска, карточка проекта. Эта система подходит и для небольших проектов. Я использую её даже для одностраничных сайтов. МодулиКаждый модуль представлен набором файлов, описывающих разметку, внешний вид и поведение элементов. Это облегчает их разработку, так как всё, что с ними связано, лежит рядом. В файловой системе это выглядит так:
Все файлы, связанные с модулем, лежат в одной директории
Название модуля отражает его предназначение. Это название используется и в именах файлов, и в качестве класса для описания стилей. Благодаря этому, зная только класс, легко найти файл с его описанием.
Если встретим класс
project в разметке, то понятно, что его описание в project.css ЭлементыЭлементом модуля называется то, что не имеет смысла в отрыве от модуля. Например, заголовок статьи или пункт меню. Для отражения связи элемента с модулем мы строим классы элементов по схеме «
У проекта есть заголовок и описание
Мы не вкладываем элемент в элемент, поскольку это затрудняет их перемещение внутри модуля:
Плохо: элемент относится к другому элементу.
Если мы захотим перенести месяц в другое место модуля,
придётся переименовывать класс.
Хорошо: элемент относится напрямую к модулю…
…поэтому структуру легко изменить без переименований
МодификаторыДля изменения поведения модуля или элемента мы используем модификаторы. Название модификатора отражает смысл изменения. Чтобы визуально выделить модификаторы на фоне других классов, мы используем префикс с двойным подчёркиванием. Например:
Хорошо: названия сообщают об изменениях
Глобальные модификаторы запрещены:
Плохо: в другом модуле может использоваться модификатор с таким же именем
Хорошо: модифицируем пункт меню
Запрещается стилизация модификаторами от родительских модулей.
Плохо: мы описываем форму в другом файле. Непонятно, какой стиль применится в итоге.
Плохо: все стили в одном файле, но мы ссылаемся на внешний модуль. Изменение во внешнем модуле может повлиять на нашу форму.
Хорошо: мы добавили модификатор самой форме и используем его для стилизции. Форма полностью независима от внешних модулей
При этом мы разрешаем изменение элемента с помощью модификатора модуля. Стили модуля хранятся в одном файле и предсказать результат возможно:
Можно: все модификации в одном месте
Составные имена классовЕсли для описания модуля или элемента требуется больше одного слова, то используем кэмелКейс:
ПроблемыК сожалению, все проблемы этот набор правил не решает. Самая острая сейчас — смешение ролей: один и тот же объект одновременно быть самостоятельным модулем и элементом другого модуля:
Проблема в том, что определения Если у уважаемых советчиков есть опыт решения этой проблемы, буду рад услышать предложения. |
О модульной системе в «Техноведре» |
P. S. Это был совет о
|