Массовая имплементация пользовательских свойств CSS в большинстве популярных браузеров открыла простор для творчества и экспериментов над архитектурой CSS-кода, недостижимой ранее. - Всесильны ли препроцессоры? - Можно ли дать CSS второй шанс? - Наследуемость или БЭМ? - А что с обратной совместимостью? Решение есть! В рамках доклада будут детально рассмотрены практические примеры применения CSS Custom Properties. Также будут рассмотрены новые спецификации CSS Extensions (Сustom selectors) и CSS @apply Rule в рамках перспективы отказа от препроцессоров.

1. Пользовательские свойства
как основа архитектуры CSS
Павел Ловцевич, LOVATA

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

3. Популярные возможности

4. Преимущества переменных
Переменные — основа современного правильно сконструированного проекта.
Карен Менезес,Variables: The Backbone Of CSS Architecture
• Модульность.
• Уменьшение повторяемости.
• Сокращение объема.
• Повышение читаемости.
• Стайлгайд.
“

5. Переменные.Когда и какие?
Условие
• Значение встречается в коде два и более раз.
• Значение в будущем может изменяться.
Тип
• Измерения (размеры, отступы, радиусы скругления и т.п.).
• Цветовые схемы.
• Типографика.
• Наборы иконок.
• Брейкпойнты.

6. Переменные в CSS
• 2008 — первая реализация в Safari.
• 2012 — CSS Variables Module Level 1.
• 2013 — CSS Custom Properties for Cascading Variables Module Level 1.
• 2014 — первая реализация по спецификации в Chrome и Firefox.
• 2015 — W3C Candidate Recommendation.
• 2016 — массовое внедрение в браузерах.

7. Преимущества переменных CSS
• Работают в runtime и доступны для чтения и изменения.
• Существуют в DOM'е и ограничены областью видимости узла.
• Наследуются до последнего потомка узла DOM!

8. Переменные Пользовательские свойства CSS
Пользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявляющим имя
переменной, и заданным значением.
--Variable: value;
Переменная
Функция CSS, связывающая идентификатор --
variable и его значение.
var(--Variable);

9. V
V
Переменные Пользовательские свойства CSS
Пользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявляющим имя
переменной, и заданным значением.
-- ariable: value;
Переменная
Функция CSS, связывающая идентификатор --
variable и его значение.
var(-- ariable);

10. Поддержка в браузерах
PostCSS-костыль IE/Edge.

11. Проголосовать за внедрение в Edge
http://bit.ly/css-var-edge

12. Область видимости
SASS
$variable: value;
CSS
:root {
--variable: value;
}
01.
02.
03.
01.
02.
03.

13. :root {
}
Область видимости
SASS
$variable: value;
CSS
--variable: value;
01.
02.
03.
01.
02.
03.

14. html {
}
Область видимости
SASS
$variable: value;
CSS
:root {
--variable: value;
}
Альтернативная запись:
--variable: value;
01.
02.
03.
01.
02.
03.
01.
02.
03.

15. ;!global
Область видимости
SASS
$variable: value;
Глобальная из локальной:
selector {
$variable: value
}
CSS
:root {
--variable: value;
}
Альтернативная запись:
html {
--variable: value;
}
01.
02.
03.
01.
02.
03.
04.
01.
02.
03.
01.
02.
03.

16. Ограничение области видимости
SASS
selector {
$variable: value;
}
CSS
selector {
--variable: value;
}
А также:
• вложенный селектор;
• @mixin.
А также:
• псевдокласс;
• @media.
01.
02.
03.
01.
02.
03.

17. Синтаксис
SASS
Объявление:
$variable: value;
Вызов:
selector {
property: $variable;
}
CSS
Объявление:
:root {
--variable: value;
}
Вызов:
selector {
property: var(--variable);
}
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.

18. $variable: value;
selector {
property: $variable;
}
Голосуем за вариант SASS
SASS
Объявление:
Вызов:
CSS
Объявление:
:root {
--variable: value;
}
Вызов:
selector {
property: var(--variable);
}
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.

19. :root {
--variable: value;
}
selector {
property: var(--variable);
}
Голосуем за вариант CSS
SASS
Объявление:
$variable: value;
Вызов:
selector {
property: $variable;
}
CSS
Объявление:
Вызов:
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.

20. Причины выбранного синтаксиса
Если бы мы использовали символ "$" для переменных, то не смогли бы его использовать для
будущих новых вещей, подобных на переменные.
Таб Аткинс,Let's Talk about CSS Variables
На самом деле:
• совместимость с препроцессорами;
• нативные "грамматика" и "пунктуация" CSS.
“

21. Динамичность
переменных

22. all-in-one.css
Один большой CSS
HTML
<head>
<link rel="stylesheet" href=" ">
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.

23. Много мелких CSS
HTML
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="block.css">
…
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.

24. main.css
Много мелких CSS
HTML
<head>
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href="block.css">
…
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.

25. block.css
Много мелких CSS
HTML
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href=" ">
…
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.

26. block.css
Много мелких CSS
HTML
<head>
<link rel="stylesheet" href="main.css">
…
</head>
<body>
<link rel="stylesheet" href=" ">
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
08.
09.

27. Блокировка отображения
HTML
<head>
<link
rel="stylesheet"
href="main.css">
</head>
main.css
:root {
--block-display: none;
}
.block {
display: var(--block-display);
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.

28. main.css
Блокировка отображения
HTML
<head>
<link
rel="stylesheet"
href=" ">
</head>
main.css
:root {
--block-display: none;
}
.block {
display: var(--block-display);
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.

29. none
display
Блокировка отображения
HTML
<head>
<link
rel="stylesheet"
href="main.css">
</head>
main.css
:root {
--block-display: ;
}
.block {
: var(--block-display);
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.

30. block.css
Снятие блокировки
HTML
<body>
<link
rel="stylesheet"
href=" ">
<div class="block">
…</div>
</body>
block.css
.block {
--block-display: block;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.

31. block
Снятие блокировки
HTML
<body>
<link
rel="stylesheet"
href="block.css">
<div class="block">
…</div>
</body>
block.css
.block {
--block-display: ;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.

32. Переменные
в @media

33. Переменные в @media
CSS
:root {
--gutter: 1em;
}
.сontainer {
padding: var(--gutter);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.

34. 1em
2em
Переменные в @media
CSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 1200px) {
:root { --gutter: ; }
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.

35. 1em
2em
1em
2em
Переменные в @media
CSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 1200px) {
:root { --gutter: ; }
}
CSS глазами браузера
.сontainer {
padding: ;
}
@media (min-width: 1200px) {
.сontainer {
padding: ;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.
04.
05.
06.
07.
08.
09.

36. 1em
Переменные в @media (SASS)
SASS
$gutter: 1em;
.сontainer {
padding: $gutter;
}
@media (min-width: 1200px) {
$gutter: 2em;
}
CSS
.сontainer {
padding: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.

37. @media (min-width: 1200px) {
$gutter: 2em;
}
1em
Переменные в @media (SASS)
SASS
$gutter: 1em;
.сontainer {
padding: $gutter;
}
CSS
.сontainer {
padding: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.

38. Наследование
переменных

39. button
Наследование переменных
CSS
:root {
--main-color: black;
}
{
background:
var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.

40. black
white
black
white
Наследование переменных
CSS
:root {
--main-color: ;
}
button {
background:
var(--main-color);
}
.black-box {
--main-color: ;
}
CSS глазами браузера
button {
background: ;
}
.black-box button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.
04.
05.
06.
07.

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

42. Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.button {
background: black;
}
.header .button {
background: white;
}
Хорошо
.button {
background: var(--main-color, black);
}
.header {
--main-color: white;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.

43. black
Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.button {
background: black;
}
.header .button {
background: white;
}
Хорошо
.button {
background: var(--main-color, );
}
.header {
--main-color: white;
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.

44. .header {
--main-color: white;
}
Принцип открытости/закрытости
Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.button {
background: black;
}
.header .button {
background: white;
}
Хорошо
.button {
background: var(--main-color, black);
}
01.
02.
03.
04.
05.
06.
07.
01.
02.
03.
04.
05.
06.
07.

45. Настройки
по умолчанию

46. Локальный fallback
CSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.

47. initial
Локальный fallback
CSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.

48. green
green
Локальный fallback
CSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.

49. red red
Локальный fallback
CSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.

50. Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
green);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

51. --main-color
Глобальный fallback
CSS
:root {
:
var(--main-color-custom,
green);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

52. --main-color-custom
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
green);
: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

53. --main-color-custom
--main-color-custom
Глобальный fallback
CSS
:root {
--main-color:
var( ,
green);
: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

54. green
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

55. green
green
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
);
--main-color-custom: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.

56. red
red
Глобальный fallback
CSS
:root {
--main-color:
var(--main-color-custom,
green);
--main-color-custom: ;
}
button {
background: var(--main-color);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.

57. Fallback в SASS
SASS
$color: null;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

58. $color
$color
Fallback в SASS
SASS
: null;
: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

59. null
Fallback в SASS
SASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

60. !default
Fallback в SASS
SASS
$color: null;
$color: green ;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.

61. green green
Fallback в SASS
SASS
$color: null;
$color: !default;
button {
background: $color;
}
CSS
button {
background: ;
}
01.
02.
03.
04.
05.
06.
01.
02.
03.

62. red
red
Fallback в SASS
SASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
button {
background: ;
}
01.
02.
03.
04.
05.
06.
01.
02.
03.

63. I18n

64. “aнглийские
двойные”

65. «французские
ёлочки»

66. I18n
HTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.

67. lang
I18n
HTML
<html ="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.

68. « »
“ ”
I18n
HTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r);
}
:root:lang(ru) {
--quotes-l: " "; --quotes-r: " ";
}
:root:lang(en) {
--quotes-l: " "; --quotes-r: " ";
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

69. ru
« »
« »
I18n
HTML
<html lang=" ">
<body>
<q>Чебурашка</q>
</body>
</html>
Результат
Чебурашка
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r);
}
:root:lang(ru) {
--quotes-l: " "; --quotes-r: " ";
}
:root:lang(en) {
--quotes-l: "“"; --quotes-r: "”";
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

70. en
“ ”
“ ”
I18n
HTML
<html lang=" ">
<body>
<q>Чебурашка</q>
</body>
</html>
Результат
Чебурашка
CSS
q {
quotes: var(--quotes-l)
var(--quotes-r);
}
:root:lang(ru) {
--quotes-l: "«"; --quotes-r: "»";
}
:root:lang(en) {
--quotes-l: " "; --quotes-r: " ";
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

71. Вычисляемые
значения

72. Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.

73. margin-bottom
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.

74. --line-height: 1.5;
Вычисляемые значения
CSS
:root {
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.

75. rem
1.5 rem
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height) ;
}
CSS глазами браузера
p {
margin-bottom: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.

76. Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
1rem);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.

77. var(--line-height)
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc( *
1rem);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.

78. 1rem
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.

79. 1rem
1rem
Вычисляемые значения
CSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS глазами браузера
p {
margin-bottom: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
01.
02.
03.

80. Цветовые
схемы
и SVG

81. Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="red" />
</svg>
01.
02.
03.
04.
05.

82. red
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " />
</svg>
01.
02.
03.
04.
05.

83. --main-color
--main-color
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var( )" />
</svg>
CSS
:root {
:
var(--main-color-custom, green);
--main-color-custom: red;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.

84. green
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var(--main-color)" />
</svg>
CSS
:root {
--main-color:
var(--main-color-custom, );
--main-color-custom: red;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.

85. --main-color-custom
Цветовые схемы и SVG
SVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="var(--main-color)" />
</svg>
CSS
:root {
--main-color:
var(--main-color-custom, green);
: red;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.

86. red red
Цветовые схемы и SVG
SVG глазами браузера
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " />
</svg>
CSS
:root {
--main-color:
var(--main-color-custom, green);
--main-color-custom: ;
}
01.
02.
03.
04.
05.
01.
02.
03.
04.
05.

87. JavaScript

88. API CSSVariablesMap
el.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el.style.var.delete('variable');
01.
02.
03.
04.

89. get
has
set
delete
API CSSVariablesMap
el.style.var. ('variable');
el.style.var. ('variable');
el.style.var. ('variable', 'value');
el.style.var. ('variable');
01.
02.
03.
04.

90. API CSSVariablesMap
el.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el.style.var.delete('variable');
API удалено из стандарта в поисках лучшего решения.
01.
02.
03.
04.

91. getPropertyValue
setProperty
removeProperty
API CSSStyleDeclaration
getComputedStyle(document.documentElement). ('--variable');
element.style. ('--variable', 'value');
element.style. ('--variable');
01.
02.
03.

92. 'var(--anotherVariable, "fallback")
API CSSStyleDeclaration
getComputedStyle(document.documentElement).getPropertyValue('--variable');
element.style.setProperty('--variable', 'value');
element.style.removeProperty('--variable');
И даже так:
element.style.setProperty('--variable', ');
01.
02.
03.

93. Проверка
поддержки

94. Проверка поддержки в CSS
CSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
01.
02.
03.
04.
05.
06.
07.

95. @supports (--a: 0) {
}
Проверка поддержки в CSS
CSS
/* стили с поддержкой переменных */
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
01.
02.
03.
04.
05.
06.
07.

96. @supports not (--a: 0) {
}
Проверка поддержки в CSS
CSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
/* стили без поддержки переменных */
01.
02.
03.
04.
05.
06.
07.

97. Проверка поддержки в CSS
CSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
Не работает в IE!
01.
02.
03.
04.
05.
06.
07.

98. Проверка поддержки в JS
CSS
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
// сценарии с поддержкой переменных
} else {
// сценарии бех поддержки переменных
}
01.
02.
03.
04.
05.

99. Ограничения переменных CSS
• нельзя использовать в:
• в именах обычных свойств CSS: var(--side): 10px ;
• в значениях медиа-запросов: @media screen and (min-width: var(--desktop-
breakpoint) { } ;
• в подстановке URL: url(var(--image-url)) ;
• будьте осторожны с вычислениями calc() :
• со сложными вычислениями в принципе;
• в Chrome с умножением/делением дробных значений;
• в Firefox с вычислениями внутри функций rgba() .
• нельзя одномоментно cбрасывать значения всех переменных: --: initial .

100. Таб Аткинс
Работает над:
• CSS Nesting Module Level 3
• CSS @apply Rule
• CSS When/Else Rules

101. @mixin
@apply

102. @apply
CSS
:root {
--clearfix: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.

103. :root {
}
@apply
CSS
--clearfix: {
display: table;
clear: both;
content: '';
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.

104. --clearfix
@apply
CSS
:root {
: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.

105. display: table;
clear: both;
content: '';
@apply
CSS
:root {
--clearfix: {
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.

106. @apply --clearfix;
display: table;
clear: both;
content: '';
@apply
CSS
:root {
--clearfix: {
display: table;
clear: both;
content: '';
}
}
.box:after {
}
CSS глазами браузера
.box:after {
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
01.
02.
03.
04.
05.

107. chrome://flags

108. @custom-selector

109. @custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.

110. @custom-selector
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
:--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.

111. :--heading
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector {
expansion: h1, h2, h3,
h4, h5, h6;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.

112. expansion: h1, h2, h3,
h4, h5, h6;
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.

113. :--heading
@custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
article + p {
margin-top: 0;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
05.
06.
07.
08.

114. @custom-selector
CSS
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
CSS
@custom-selector :--heading {
expansion: h1, h2, h3,
h4, h5, h6;
}
article :--heading + p {
margin-top: 0;
}
Полифил PostCSS Custom Selectors.
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
05.
06.
07.
08.

115. Подытоживая
• Новые способы решения старых задач.
• Решение невозможных для препроцессоров задач.
• Расширение компонентов через наследование.
• Широкая поддержка в браузерах.
• Простой нативный способ взаимодействия с JS, SVG и т.п.
• Начало конца эры препроцессоров :-P

116. Спасибо за внимание! Вопросы?
Павел Ловцевич
CTO @ LOVATA
@zigzag_mcquack
p.lovtsevich@lovata.com

117. Не забудьте проголосовать!
http://bit.ly/css-var-edge