CSS from the future

One step in the future:
CSS Variables
version ✌

Action plan
●
●
●
●
●
●
●

Define
--your-property: value;

How to define a property
:root {
--button-color: blue;
--align: left;
}
header {
--header-height: 300px;
}

Use
var(--your-property, default-value)

How to use a variable
button {
background-color: var(--button-color);
}
a {
color: var(--link-color, black);
}

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
Inheritance
:root { --link: red }
footer { --link: blue }
a { color: var(--link) }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
$link: red
footer { $link: blue }
a { color: $link }

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
Inheritance compiled
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
$link: red
a { color: $link red }

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
Inheritance
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
$link: red
a { color: $link }
Preprocessors: Nope

:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries
$gutter: 10px;
$gutter: 15px;
}
article {
padding: $gutter;
}

:root {
--gutter: 10px;
}
:root {
--gutter: 15px;
}
}
article {
}
Media queries compiled
$gutter: 10px;
$gutter: 15px;
}
article {
padding: $gutter 10px;
}

:root {
--gutter: 10px;
}
:root {
--gutter: 15px;
}
}
article {
}
Media queries
$gutter: 10px;
$gutter: 15px;
}
article {
padding: $gutter;
}
Preprocessors: Nope

:root {
--gutter: 10px;
}
:root {
--gutter: 15px;
}
}
article {
}
Preprocessors solution
$gutter: 10px;
$gutter-large: 15px;
article {
padding: $gutter-large;
}
}
article {
padding: $gutter;
}

But…
:root {
--gutter: 10px;
}
:root {
--gutter: 15px;
}
}
article.class {
}
$gutter: 10px;
$gutter-large: 15px;
article {
padding: $gutter-large;
}
}
article.class {
padding: $gutter;
}

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Base rule
a { background: var(--link, red) }

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Override variables, not properties
section { --link: green }

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Make Cascade Love, not Specificity War

Old school...
footer section a { background: green }
footer a { background: blue }
a { background: red }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>

Old school...
--------------
footer section a { background: green }
footer a { background: blue }
a { background: red }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
The end of specificity war!

Read
getComputedStyle(element).getPropertyValue('--color');
element.style.setProperty('--color', 'red');
Write

Browsers
49+ 31+ 15? 36+ 9.1+
Jan 2017: 68.34%

Fallback property
@supports (--foo: green) {
body {
color: var(--my-color);
}
}
Feature query
color: red;
color: var(--my-color, red);

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
We already use CSS variables
body { font-size: 18px }
footer { font-size: 16px }
section { font-size: 14px }
a {
border-width: 0.2em;
padding-right: 2em;
}

<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
The superhero: currentColor
body { color: red }
footer { color: blue }
section { color: green }
a {
border-color: currentColor;
}

.theme(@bg: gray, @col: red, @var: blue) {
.box { background: @bg }
.button { color: @col }
.box .button { color: @var }
}
.theme();
.dark {
.theme(black, orange, lightgreen);
}
Theming with LESS

.box { background: gray }
.button { color: red }
.box .button { color: blue }
.dark .box { background: black }
.dark .button { color: orange }
.dark .box .button { color: lightgreen }
Theming with CSS

.box {
--col: var(--alt, blue);
background: var(--bg, lightgray);
}
.button {
color: var(--col, red);
}
.dark {
--bg: black;
--col: orange;
--alt: lightgreen;
}
Theming with CSS Variables

CSS from the future

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

CSS from the future