Стиль как декларация
Стиль - это декларация свойств вида тип-значение для дом узла (или набора узлов). Таблица стилей это набор деклараций.
{
	"document": {
		"selector": {
			"meta": {
				"local-priority": 1
			}
			"style": {
				"property": "value",
				"property": "value"
			}
		}
	}
}
Стиль как функция
Стиль это функция которая принимает на вход дом-ноду (селектор) а через API браузера возвращает ее внешний вид.
Существует 12 основных типов Дом-нод. Большинству типов доступен весь API, но существует и специфический для конкретного типа. Можно менять типизацию внутри функции.
display: inline;
display: block;
display: inline-block;
display: list-item;
display: table;
display: table-cell;
display: table-row;
display: flex;
display: grid;
position: absolute;
position: static;
position: fixed;
Дом-ноды предоставляют 4 вида интерфейса, различающиеся шириной применения
[tag, tag], [tag in tag, tag in tag]
[class, class]
id
inline

function applyStyle([tag], [class], id, inline) {
	return {
		this.style.property="value",
		this.style.property="value"
	}
}

DOM-tree для нас черный ящик. Мы моделируем его через абстракные объекты описанные посредсвам классов и приватных методов. Нет метода - нет DOM ноды. Используем только один интерфейс.

Объекты репрезентируют визуально-функциональные модули (комплексные структуры) страницы и возвращют их внешенее оформление.
Все объекты используют один интерфейс (class) и принимают все типы данных.
Объекты не согласованы, не взаимодействуют и ортогональны по отношению друг к другу.
Определенная констеляция классов описывает страницу.

конкретный объект
.b-table {}

.b-list {} // абстракный объект. Классы исчерпывают свойства родительского класса, он пустой в реализации (не декларирует ничего)
.b-list_vert {}
.b-list_horiv {}
.b-list_unstyled {}
.b-list_flat {}
.b-list_ordered {}
.b-list_unordered {}

инкапсуляция
инкапсуляция достигается нейм конвеншеном и использованием только интерфейса class
.b-block // класс
.b-block__element // приватные методы (декларации) класса
.b-block_mod // под класс наследует свойства родительского класса
.b-block_mod .b-block__element // дополняет или перекрывает его свойства

иммютабилити класса
неизменность при перекрытии имен (и избежания ненужного наследования)
a) prefixed-uniq-classes-namespaces
.b-block-name
неизменность от случайного наследовании вышестоящего дома
b) local reset in each module
.b-block {
	margin: 0;
	padding: 0;
	list-style: none;
}
неизменность при перекрытии свойства
с) использование !important;

наследование
class="b-button b-button_red b-button_big" // модификации наследуют свойства базового класса button и расширяют их цветом и размером
class="b-form b-form_account-info" // модификации наследуют свойства базового класса form и изменяют их специфическими св-ми характерными только для этой формы

полиморфизм
отвязка от DOM структуры
.b-table // Этот класс может быть реализован на любом HTML div, ul>li, table и т.д. Он не ожидает какой-то конкретный тип данных
.b-table__row
.b-table__cell

.l-pattern { // принимая любой тип данных он может модифицировать свойства по разному. Но мы стараемся изменять тип данных при входе.
	margin: 0; // applyed to all elements exept inline and table-cell
	padding-top: 10px; // applied to all elements exept inline
	list-style: none; // Ad hoc - applied only to <ul> element
	vertical-align: top; // applied only to table, td, img (inline-block elems)
	position: static; // applyed to all elements
	display: initial; // applyed to all elements
}


SRP
class="b-button b-button_red b-button_big"

SoC
.l-asided // отвечает только за скелет, в который вкладываются другие блоки
.b-form // отвечает за переносимый модуль и описывает его
.js-tabs // отвечает только за байндинг к JS
.i-shadow-20 // виртуальный класс, расширяющий любой класс своими свойствами, не может использоваться сам по себе

states
через псевдоклассы и модификаторы
class="l-grid__item _@desk_w2 _@tabl_w2 _@mob_w1"