Theming Drupal 8 - andyceo/documentation GitHub Wiki
Стили 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.