Shower Presentation Engine

Пользовательские свойства
как основа архитектуры CSS

Павел Ловцевич, LOVATA

Павел Ловцевич

CTO @ LOVATA
@zigzag_mcquack
p.lovtsevich@lovata.com

Препроцессоры

Результаты опроса использования возможностей CSS-препроцессоров

Преимущества переменных

Переменные — основа современного правильно сконструированного проекта.

Карен Менезес, Variables: The Backbone Of CSS Architecture

Модульность.
Уменьшение повторяемости.
Сокращение объема.
Повышение читаемости.
Стайлгайд.

Переменные. Когда и какие?

Условие

Значение встречается в коде два и более раз.
Значение в будущем может изменяться.

Тип

Измерения (размеры, отступы, радиусы скругления и т.п.).
Цветовые схемы.
Типографика.
Наборы иконок.
Брейкпойнты.

18 лет!

Runtime
DOM
Cascading

Синтаксис

Свойство

			--variable: value;

Функция

				var(--variable);

Синтаксис

Свойство

			--variable: 💩💩💩;

Функция

				var(--variable);

Синтаксис

Свойство

			--variable: @#$%&!;

Функция

			background: var(--variable);

Синтаксис

Свойство

			--variable: 10px;

Функция

			background: var(--variable);

Синтаксис

Свойство

			--variable: 10px;

Функция

			background: trasparent;

PostCSS CSS Variables

Source + Fallback
@media
Object()

PostCSS CSS Variables

			:root {
				--variable: value;
			}
			selector {
				property: value; /* fallback */
				property: var(--variable); /* runtime */
			
			}

The status of CSS Variables in Microsoft Edge

Scope

				:root {
					--variable: value;
				}

Аналогично

					document.documentElement

				html {
					--variable: value;
				}

Scope

			selector {
				--variable: value;
			}

Псевдокласс:

				selector:pseudo-class {
					--variable: value;
				}

Медиа-запрос:

				@media selector {
					--variable: value;
				}

Scope

Shadow DOM v1

				:host {
					--variable: value;
				}

Shadow DOM v0

				body /deep/ selector {
					property: value;
				}

$foo

Custom Property
≠
Variable

$foo

Допустимая лексема CSS.
--variable: value.
Fallback.

$foo

Если бы мы использовали символ "$" для переменных, то не смогли бы его использовать для будущих новых более мощных сущностей, подобных на переменные.

Таб Аткинс, Let's Talk about CSS Variables

$foo

--property

				-webkit-property
				-moz-property
				-ms-property
				-o-property

var()

				url()
				rgb()
				calc()
				attr()

@media

@media

				:root {
					--gutter: 1rem;
				}
				.сontainer {
					margin: var(--gutter);
				}
				
					@media (min-width: 1200px) {
						:root { --gutter: 2rem; }
					}

@media (SASS)

			$gutter: 1rem;
				
			.сontainer {
				margin: $gutter;
			}
				
			@media (min-width: 1200px) {
				$gutter: 2rem;
			}

@media (SASS)

			$gutter: 1rem;
				
			.сontainer {
				margin: $gutter;
			}
				
			@media (min-width: 1200px) {
				$gutter: 2rem;
			}

@media (SASS)

@mixin + $map: ();
%foo + #{}
TL;DR

Inheritance

			:root {
				--color: black;
			}
			button {
				background: var(--color);
			}
			
				.black-box {
					--color: white;
				}

Inheritance

				:root {
					--color: black;
				}
				selector {
					background: var(--color);
				}
									
					selector > selector {
						--color: initial;
					}

Inheritance

				* {
					--color: initial;
				}

				:root {
					--color: black;
				}

				selector {
					--color: black;
				}

Каскад?
Это шутка?

SOLID O

Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения, но закрыты для изменения.

Бертран Мейер

SOLID O

Плохо

				.button {
					background: black;
				}
					
				.black-box .button {
					background: white;
				}

Хорошо

				.button {
					background: var(--color,
					black);
				}
				.black-box {
					--color: white;
				}

SOLID O

Плохо

				.button {
					background: black;
				}
					
				.black-box .button {
					background: white;
				}

Хорошо

				.button {
					background: var(--color,
					black);
				}
				.black-box {
					--color: white;
				}

SOLID O

Плохо

				.button {
					background: black;
				}
					
				.black-box .button {
					background: white;
				}

Хорошо

				.button {
					background: var(--color,
					black);
				}
				.black-box {
					--color: white;
				}

SOLID O

Плохо

				.button {
					background: black;
				}
					
				.black-box .button {
					background: white;
				}

Хорошо

				.button {
					background: var(--color,
					black);
				}
				.black-box {
					--color: white;
				}

SOLID O

Плохо

				.button {
					background: black;
				}
					
				.black-box .button {
					background: white;
				}

Хорошо

				.button {
					background: var(--color,
					black);
				}
				.black-box {
					--color: white;
				}

SOLID O

Плохо

				.button {
					background: black;
				}
					
				.black-box .button {
					background: white;
				}

Хорошо

				.button {
					background: var(--color,
					black);
				}
				.black-box {
					--color: white;
				}

Fallback

			:root {
				--color:;
			}
				
			.button {
				background: var(--color, black);
			}

Fallback

				:root {
					--color:;
					--color-default: black;
				}
					
				.button {
					background: var(--color, var(--color-default));
				}

Fallback

				:root {
					--color:;
					--color-default: black;
					
				}
				.button {
					background: var(--color, var(--color-default));
				}

Fallback

				:root {
					--color: ;
					--color-default: black;
					
				}
				.button {
					background: var(--color, var(--color-default));
				}

Fallback

				:root {
					--color: initial;
					--color-default: black;
					
				}
				.button {
					background: var(--color, var(--color-default));
				}

Fallback

				:root {
					--color: var(--color-custom, black);
					--color-custom: initial;
					
				}
				.button {
					background: var(--color);
				}

I18n

“en”
«ru»

I18n

			<html lang="ru">
				…
				<body>
					<q>Чебурашка</q>
				</body>
			</html>

I18n

			<html lang="ru">
				…
				<body>
					<q>Чебурашка</q>
				</body>
			</html>

I18n

			:root:lang(en) {
			  --quotes-l: "“"; --quotes-r: "”";
			}
			q {
				quotes: var(--quotes-l, "«")
						var(--quotes-r, "»");
			}

I18n

			:root:lang(en) {
			  --quotes-l: "“"; --quotes-r: "”";
			}
			q {
				quotes: var(--quotes-l, "«")
						var(--quotes-r, "»");
			}

calc()

			:root {
				--line-height: 1.5;
				--paragraph-margin: calc(var(--line-height) * 2);
			}
				
			p {
				margin-bottom: calc(var(--paragraph-margin, 0) * 1px);
			}

calc()

			:root {
				--line-height: 1.5;
				--paragraph-margin: calc(var(--line-height) * 2);
			}
				
			p {
				margin-bottom: calc(var(--paragraph-margin, 0) * 1px);
			}

calc()

			:root {
				--line-height: 1.5;
				--paragraph-margin: calc(var(--line-height) * 2);
			}
				
			p {
				margin-bottom: calc(var(--paragraph-margin, 0) * 1px);
			}

<SVG>

			<svg height="100" width="100">
				<style>
					:root {
						--color: black;
					}
				</style>
				<circle cx="50" cy="50" r="50" fill="var(--color)" />
			</svg>

<SVG>

CSS

			:root {
				--color: black;
			}

SVG

			<svg height="100" width="100">
				<circle cx="50" cy="50" r="50" fill="var(--color)" />
			</svg>

JavaScript

API CSSStyleDeclaration

Получаем

			getComputedStyle(document.documentElement)
			.getPropertyValue('--variable');

Назначаем

			element.style.setProperty('--variable', 'value');

Удаляем

			element.style.removeProperty('--variable');

API CSSStyleDeclaration

See the Pen css variables by Daniel David (@danield770) on CodePen.

@supports

			@supports (--a: 0) {
				/* Progressive Enhancement */
			}

@supports

			@supports not (--a: 0) {
				/* Graceful Degradation */
			}

CSS.supports

			if (window.CSS && window.CSS.supports && 
			window.CSS.supports('--a', 0)) {
				// сценарии с поддержкой переменных
			} else {
				// сценарии без поддержки переменных
			}

И еще…

Thx Tab!

Пользовательские свойства как основа архитектуры CSS

Павел Ловцевич

Препроцессоры

Преимущества переменных

Переменные. Когда и какие?

18 лет!

Runtime DOM Cascading

Синтаксис

Синтаксис

Синтаксис

Синтаксис

Синтаксис

PostCSS CSS Variables

PostCSS CSS Variables

Scope

Scope

Scope

Scope

$foo

Custom Property ≠ Variable

$foo

$foo

$foo

@media

@media

@media

@media

@media (SASS)

@media (SASS)

@media (SASS)

Inheritance

Inheritance

Inheritance

Inheritance

Inheritance

Inheritance

Каскад? Это шутка?

SOLID O

SOLID O

SOLID O

SOLID O

SOLID O

SOLID O

SOLID O

Fallback

Fallback

Fallback

Fallback

Fallback

Fallback

Fallback

I18n

“en” «ru»

I18n

I18n

I18n

I18n

calc()

calc()

calc()

calc()

<SVG>

<SVG>

<SVG>

JavaScript

API CSSStyleDeclaration

API CSSStyleDeclaration

@supports

@supports

@supports

CSS.supports

CSS.supports

Рекомендации

И еще…

Thx Tab!

Спасибо за внимание! Вопросы?

Пользовательские свойства
как основа архитектуры CSS

Runtime
DOM
Cascading

Custom Property
≠
Variable

Каскад?
Это шутка?

“en”
«ru»

Спасибо за внимание!

Вопросы?