Как работать со стилями в $mol?

Все вопросы, которые касаются работы со стилями и темами в $mol

Как изменить или добавить свои стили в $mol?

Работа со стилями в $mol имеет свои особенности. В большинстве случаев изменить стиль какого-либо элемента не составит труда, т.к. селекторами в стилях являются сами имена компонентов.

Подробнее можете посмотреть на примере Hello World приложения в секции создания файла hello.view.css : https://mol.hyoo.ru/#!Description=Create%20your%20application%20component

Также для более углубленного изучения есть презентация по CSS in TS: https://mol.hyoo.ru/#!Description=Create%20your%20application%20component/section=slides/slides=https%3A%2F%2Fnin-jin.github.io%2Fslides%2Fcss-in-ts%2F/slide=22

Пример работы со стилями из Hello World - https://mol.js.org/app/hello/-/ тут можно посмотреть результат

/* Styling BEM-block by autogenerated attribute */
[my_hello] {
	display: flex;
	flex-direction: column;
	align-items: center;
	font: 1.5rem/1 sans-serif;
	box-shadow: 0 0 0 1px var(--mol_theme_line);
	flex: 1 1 auto;
	align-self: stretch;
	margin: 0;
}
/* Styling BEM-element by autogenerated attribute */
[my_hello_name] {
	flex-grow: 0;
	margin: 1rem;
	width: 14rem;
}

Где хранятся базовые стили $mol компонентов?

Базовые компоненты $mol имеют минимальные базовые стили, чтобы в дальнейшем их было легче переписывать и меньше перезатирать на свои. Все стили можно найти в самих исходниках компонентов. Вы можете начать изучать базовые стили компонентов на примере $mol_button_major: https://mol.hyoo.ru/#!section=demos/demo=mol_button_demo Исходники для кнопок $button: https://github.com/hyoo-ru/mam_mol/tree/master/button

Если открыть файлы css, то увидите конструкции var(--mol_gap_round); Это переменные в css. Чтобы увидеть их значения, вам нужно перейти в текущем репозитории /mol в папку /round - там вы увидите все значения. искомые значения. https://github.com/hyoo-ru/mam_mol/blob/master/gap/gap.css

Ещё отдельно на стили кнопки влияют стили от темы - подробнее их изучить можно в папке /theme https://github.com/hyoo-ru/mam_mol/tree/master/theme

Как создавать свои css переменные?

$mol расширяет базовое понятие CSS Variables добавляя к нему методологию БЭМ. Почитать, что таккое CSS Variables можно тут: https://www.w3schools.com/css/css3_variables.asp Например, для значения базовых отступов (gap) в $mol уже есть. https://github.com/hyoo-ru/mam_mol/blob/master/gap/gap.css И они применяются для кнопки https://github.com/hyoo-ru/mam_mol/blob/master/button/button.view.css#L13

// Создание CSS Variables в модуле /mol/gap
// https://github.com/hyoo-ru/mam_mol/blob/master/gap/gap.css#L4
:root {
	...
	--mol_gap_round: .25rem;
}

// Использование CSS Variables в другом модуле
// https://github.com/hyoo-ru/mam_mol/blob/master/button/button.view.css#L13
[mol_button] {
	...
	border-radius: var(--mol_gap_round);
}

БЭМ здесь работает следующим образом: В переменной --mol_gap_round : -mol - это имя модуля (Б), _gap - это имя папки в модуле (Э). _round - это имя переменной (М).