Embed Size (px)
Citation preview
Пользовательские свойства как основа архитектуры CSSПавел Ловцевич, LOVATA
Препроцессоры
Популярные возможности
Преимущества переменныхПеременные — основа современного правильно сконструированного проекта.
Карен Менезес, Variables: The Backbone Of CSS Architecture
• Модульность.
• Уменьшение повторяемости.
• Сокращение объема.
• Повышение читаемости.
• Стайлгайд.
“
Переменные. Когда и какие?Условие
• Значение встречается в коде два и более раз.
• Значение в будущем может изменяться.
Тип
• Измерения (размеры, отступы, радиусы скругления и т.п.).
• Цветовые схемы.
• Типографика.
• Наборы иконок.
• Брейкпойнты.
Переменные в 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 — массовое внедрение в браузерах.
Преимущества переменных CSS• Работают в runtime и доступны для чтения и изменения.
• Существуют в DOM'е и ограничены областью видимости узла.
• Наследуются до последнего потомка узла DOM!
Переменные Пользовательские свойства CSSПользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявляющим имя
переменной, и заданным значением.
--Variable: value;
Переменная
Функция CSS, связывающая идентификатор --
variable и его значение.
var(--Variable);
V
V
Переменные Пользовательские свойства CSSПользователькое свойство
Особая разновидность свойств CSS с
префиксом -- , объявляющим имя
переменной, и заданным значением.
-- ariable: value;
Переменная
Функция CSS, связывающая идентификатор --
variable и его значение.
var(-- ariable);
Поддержка в браузерах
PostCSS-костыль IE/Edge.
Область видимостиSASS
$variable: value;
CSS
:root {
--variable: value;
}
01.
02.
03.
01.
02.
03.
:root {
}
Область видимостиSASS
$variable: value;
CSS
--variable: value;
01.
02.
03.
01.
02.
03.
html {
}
Область видимостиSASS
$variable: value;
CSS
:root {
--variable: value;
}
Альтернативная запись:
--variable: value;
01.
02.
03.
01.
02.
03.
01.
02.
03.
;!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.
Ограничение области видимостиSASS
selector {
$variable: value;
}
CSS
selector {
--variable: value;
}
А также:
• вложенный селектор;
• @mixin.
А также:
• псевдокласс;
• @media.
01.
02.
03.
01.
02.
03.
Синтаксис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.
$variable: value;
selector {
property: $variable;
}
Голосуем за вариант SASSSASS
Объявление:
Вызов:
CSS
Объявление:
:root {
--variable: value;
}
Вызов:
selector {
property: var(--variable);
}
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.
:root {
--variable: value;
}
selector {
property: var(--variable);
}
Голосуем за вариант CSSSASS
Объявление:
$variable: value;
Вызов:
selector {
property: $variable;
}
CSS
Объявление:
Вызов:
01.
02.
03.
01.
02.
03.
01.
02.
03.
01.
02.
03.
Причины выбранного синтаксисаЕсли бы мы использовали символ "$" для переменных, то не смогли бы его использовать для
будущих новых вещей, подобных на переменные.
Таб Аткинс, Let's Talk about CSS Variables
На самом деле:
• совместимость с препроцессорами;
• нативные "грамматика" и "пунктуация" CSS.
“
Динамичность переменных
all-in-one.css
Один большой CSSHTML
<head>
<link rel="stylesheet" href=" ">
</head>
<body>
<div class="block">…</>
…
</body>
01.
02.
03.
04.
05.
06.
07.
Много мелких CSSHTML
<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.
main.css
Много мелких CSSHTML
<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.
block.css
Много мелких CSSHTML
<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.
block.css
Много мелких CSSHTML
<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.
Блокировка отображения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.
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.
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.
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.
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.
Переменные в @media
Переменные в @mediaCSS
:root {
--gutter: 1em;
}
.сontainer {
padding: var(--gutter);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
1em
2em
Переменные в @mediaCSS
:root {
--gutter: ;
}
.сontainer {
padding: var(--gutter);
}
@media (min-width: 1200px) {
:root { --gutter: ; }
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
1em
2em
1em
2em
Переменные в @mediaCSS
: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.
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.
@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.
Наследованиепеременных
button
Наследование переменныхCSS
:root {
--main-color: black;
}
{
background:
var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
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.
Каскад? Это шутка?
Принцип открытости/закрытостиПрограммные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения,
но закрыты для изменения.
Плохо
.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.
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.
.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.
Настройки по умолчанию
Локальный fallbackCSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
initial
Локальный fallbackCSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
green
green
Локальный fallbackCSS
:root {
--main-color: initial;
}
button {
background: var(--main-color,
);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
red red
Локальный fallbackCSS
:root {
--main-color: ;
}
button {
background: var(--main-color,
green);
}
CSS глазами браузера
button {
background: ;
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
Глобальный fallbackCSS
: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.
--main-color
Глобальный fallbackCSS
: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.
--main-color-custom
Глобальный fallbackCSS
: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.
--main-color-custom
--main-color-custom
Глобальный fallbackCSS
:root {
--main-color:
var( ,
green);
: initial;
}
button {
background: var(--main-color);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
green
Глобальный fallbackCSS
: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.
green
green
Глобальный fallbackCSS
: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.
red
red
Глобальный fallbackCSS
: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.
Fallback в SASSSASS
$color: null;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
$color
$color
Fallback в SASSSASS
: null;
: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
null
Fallback в SASSSASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
!default
Fallback в SASSSASS
$color: null;
$color: green ;
button {
background: $color;
}
CSS
01.
02.
03.
04.
05.
06.
green green
Fallback в SASSSASS
$color: null;
$color: !default;
button {
background: $color;
}
CSS
button {
background: ;
}
01.
02.
03.
04.
05.
06.
01.
02.
03.
red
red
Fallback в SASSSASS
$color: ;
$color: green !default;
button {
background: $color;
}
CSS
button {
background: ;
}
01.
02.
03.
04.
05.
06.
01.
02.
03.
I18n
“aнглийскиедвойные”
«французскиеёлочки»
I18nHTML
<html lang="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.
lang
I18nHTML
<html ="ru">
<body>
<q>Чебурашка</q>
</body>
</html>
CSS
01.
02.
03.
04.
05.
« »
“ ”
I18nHTML
<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.
ru
« »
« »
I18nHTML
<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.
en
“ ”
“ ”
I18nHTML
<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.
Вычисляемыезначения
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
margin-bottom
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
--line-height: 1.5;
Вычисляемые значенияCSS
:root {
}
p {
margin-bottom:
var(--line-height)rem;
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
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.
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
1rem);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
var(--line-height)
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc( *
1rem);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
1rem
Вычисляемые значенияCSS
:root {
--line-height: 1.5;
}
p {
margin-bottom:
calc(var(--line-height) *
);
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
08.
09.
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.
Цветовые схемы и SVG
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill="red" />
</svg>
01.
02.
03.
04.
05.
red
Цветовые схемы и SVGSVG
<svg height="100" width="100">
<circle cx="50" cy="50"
r="50"
fill=" " />
</svg>
01.
02.
03.
04.
05.
--main-color
--main-color
Цветовые схемы и SVGSVG
<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.
green
Цветовые схемы и SVGSVG
<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.
--main-color-custom
Цветовые схемы и SVGSVG
<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.
red red
Цветовые схемы и SVGSVG глазами браузера
<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.
JavaScript
API CSSVariablesMapel.style.var.get('variable');
el.style.var.has('variable');
el.style.var.set('variable', 'value');
el.style.var.delete('variable');
01.
02.
03.
04.
get
has
set
delete
API CSSVariablesMapel.style.var. ('variable');
el.style.var. ('variable');
el.style.var. ('variable', 'value');
el.style.var. ('variable');
01.
02.
03.
04.
API CSSVariablesMapel.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.
getPropertyValue
setProperty
removeProperty
API CSSStyleDeclarationgetComputedStyle(document.documentElement). ('--variable');
element.style. ('--variable', 'value');
element.style. ('--variable');
01.
02.
03.
'var(--anotherVariable, "fallback")
API CSSStyleDeclarationgetComputedStyle(document.documentElement).getPropertyValue('--variable');
element.style.setProperty('--variable', 'value');
element.style.removeProperty('--variable');
И даже так:
element.style.setProperty('--variable', ');
01.
02.
03.
Проверкаподдержки
Проверка поддержки в CSSCSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
01.
02.
03.
04.
05.
06.
07.
@supports (--a: 0) {
}
Проверка поддержки в CSSCSS
/* стили с поддержкой переменных */
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
01.
02.
03.
04.
05.
06.
07.
@supports not (--a: 0) {
}
Проверка поддержки в CSSCSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
/* стили без поддержки переменных */
01.
02.
03.
04.
05.
06.
07.
Проверка поддержки в CSSCSS
@supports (--a: 0) {
/* стили с поддержкой переменных */
}
@supports not (--a: 0) {
/* стили без поддержки переменных */
}
Не работает в IE!
01.
02.
03.
04.
05.
06.
07.
Проверка поддержки в JSCSS
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
// сценарии с поддержкой переменных
} else {
// сценарии бех поддержки переменных
}
01.
02.
03.
04.
05.
Ограничения переменных CSS• нельзя использовать в:
• в именах обычных свойств CSS: var(--side): 10px ;
• в значениях медиа-запросов: @media screen and (min-width: var(--desktop-
breakpoint) { } ;
• в подстановке URL: url(var(--image-url)) ;
• будьте осторожны с вычислениями calc() :
• со сложными вычислениями в принципе;
• в Chrome с умножением/делением дробных значений;
• в Firefox с вычислениями внутри функций rgba() .
• нельзя одномоментно cбрасывать значения всех переменных: --: initial .
Таб Аткинс Работает над:
• CSS Nesting Module Level 3
• CSS @apply Rule
• CSS When/Else Rules
@mixin @apply
@applyCSS
:root {
--clearfix: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
:root {
}
@applyCSS
--clearfix: {
display: table;
clear: both;
content: '';
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
--clearfix
@applyCSS
:root {
: {
display: table;
clear: both;
content: '';
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
display: table;
clear: both;
content: '';
@applyCSS
:root {
--clearfix: {
}
}
CSS глазами браузера
01.
02.
03.
04.
05.
06.
07.
@apply --clearfix;
display: table;
clear: both;
content: '';
@applyCSS
: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.
@custom-selector
@custom-selectorCSS
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.
@custom-selector
@custom-selectorCSS
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.
:--heading
@custom-selectorCSS
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.
expansion: h1, h2, h3,
h4, h5, h6;
@custom-selectorCSS
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.
:--heading
@custom-selectorCSS
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.
@custom-selectorCSS
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.
Подытоживая• Новые способы решения старых задач.
• Решение невозможных для препроцессоров задач.
• Расширение компонентов через наследование.
• Широкая поддержка в браузерах.
• Простой нативный способ взаимодействия с JS, SVG и т.п.
• Начало конца эры препроцессоров :-P
Спасибо за внимание! Вопросы? Павел Ловцевич
CTO @ LOVATA
@zigzag_mcquack
