> For the complete documentation index, see [llms.txt](https://lyumihs-organization.gitbook.io/mol-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lyumihs-organization.gitbook.io/mol-doc/faq/kak-rabotat-so-stilyami-v-usdmol.md).

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

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

<details>

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

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

Подробнее можете посмотреть на примере 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;
}
```

</details>

<details>

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

Базовые компоненты $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><br>

</details>

<details>

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

$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
// Создание 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` - это имя переменной (М).

</details>