Theming Drupal 8

Правила верстки в проекте на Drupal 8

Именование файлов

Стили CSS именуются по имени функции темизации, после имени шаблона ставится точка, и указывается тип CSS слоя. Например mymodule-template-name.module.css указывает на то, что это стили базовой разметки модуля, для шаблона mymodule-template-name.html.twig модуля mymodule и лежит этот файлик как правило в папке mymodule/css/mymodule-template-name.module.css, а шаблон соответственно в mymodule/templates/mymodule-template-name.html.twig.

Шаблоны именовать так же по имени функции темизации, заменяя нижнее подчеркивание на дефис: mymodule-template-name.html.twig

JavaScript файлы так же именовать по функции темизации, заменяя нижнее подчеркивание на точки. mymodule.template.name.js

Библиотеки именуем так же по функции темизации с префиксом - именем модуля: mymodule.theme_function заменяя нижнее подчеркивание на дефис: mymodule.theme-function

Файлы стилей

Стили модуля должны состоять из двух типов файлов:

module_name.module.css — лежит в самом модуле, и содержит основную разметку (position, left, top, margin, padding), и состояния элементов (hover, checked, .active и т.д.), необходимые для функционирования модуля.

module_name.theme.css — лежит в теме и содержит темизацию всех элементов. Так же может содержать стили разметки некритичных для функционирования и базового отображения модуля элементов.

Объявление библиотек

Объявляем css в библиотеке модуля с параметром layout. Например

some-library-name:
  version: 0.1
  css:
    layout:
      css/mymodule-template-name.module.css: {}

Далее объявляем библиотеку в теме с параметром theme:

mymodule.template-name:
  version: 0.1
  css:
    theme:
      css/mymodule-template-name.css: {}

Осталось добавить библиотеку темы в зависимости библиотеки модуля в модуле темы:

$libraries['template-name']['dependencies'][] = 'mytheme/mymodule.template-name';

Рекомендации по верстке

• Объявлять класс родительского элемента(в случае его отсутствия). Класс именовать через дефисы: $build['#attributes']['class'][] = mymodule-template-name
• Обращаться к потомку элемента через его родителя: .mymodule-template-name > .children
• Использовать человеко-понятные имена классов.
• Стараться использовать семантическую верстку.
• Свойства элементов описывать в алфавитном порядке, предварительно разбив по типу (разметка, отступы, раскраска)
• Логические блоки стилей отделять пробелом

Помнить

Сначала подключаются стили объявленные как module, потом theme.

На момент работы behavior подключены только стили module.

Ссылки

• Рекомендации Drupal
• SMACSS
• Семантическая верстка