slides.oddbird.net/variables/aea2104/

Beyond CSS Variables

slides.oddbird.net/variables/aea2104/

Miriam Suzanne @ An Event Apart (Spring Summit)

I heard You Like Variables

I heard You Like Variables

In CSS

Sass
Less
PostCSS
CSS-in-JS…

Take Common Values

Global Design Tokens

brand colors, sizes, fonts, etc…

hsl(322, 92%, 24%)

Provide Meaningful Names

$deep-raspberry

$best-color

$action

$link
$button 

// origin
$best-color: hsl(322, 92%, 24%);

// meaning
$action: $best-color;

// usage
$link: $action;
$button: $action;
Physical patch bay with wires

Don’t Do Anything

Until we apply them

button {
  background-color: $button;
}

😎 cooool

2014… CSS Variables

Data on support for the css-variables feature across the major browsers from caniuse.com

$name: value;
--name: value;

-webkit-property
-moz-property --property

Define On Elements 

// global
$best-color: hsl(322, 92%, 24%);
$action: $best-color;
$button: $action;

html {
  --best-color: hsl(322, 92%, 24%);
  --action: var(--best-color);
  --button: var(--action);
}

Inherit By Default

Apply On Any Descendants

var( --property ) 

button { color: var(--button); }

Keep Sass/CSS Global Values NSYNC 

$best-color: hsl(329.8 67.7% 57.5%);

html {
  --action: #{$best-color};
}

$colors: (
  'brand-blue': hsl(195, 52%, 31%),
  'brand-orange': hsl(24, 100%, 62%),
  'brand-pink': hsl(322, 92%, 24%),
);

html {
  @for $name, $value in $colors {
    --#{$name}: #{$value};
  }
}

If you Only Use Global Values

Then we can Polyfill CSS Variables!

😎 cooooool

🤔 buuuuut…

😬 why tho?

Preprocessor are… Compiled (Server-Side) 

button {
  background-color: $action;
}

Preprocessor ✨ Magic ✨ 

button {
  background-color: hsl(322, 92%, 24%);
}

Sass Variables are Static at Compilation

That’s a Huge Limitation

CSS is… Responsive (Client-Side)

Responds to Devices

Responds to Browsers

Responds to User Preferences

Responds to Interactions

Responds to HTML Context

CSS Variables Are Responsive

CSS Variables Are Always Dynamic

Men in Black agents J & K with a Neuralyzer to wipe your memory

CSS Variables Need a New Mental Model

"CSS Custom Properties…

…for Cascading Variables Module Level 1"

Cascade Like Properties

Inherit Like (some) Properties

Custom Properties

Properties that we define

The Cascade Filters Targeted Values

when there are conflicts

p { color: black; }
p.error { color: red; }

Change values Based on State, Class, &c

Then Inheritance Fills in Missing Values

based on nearest target ancestor

html { color: green; }
p { /* color inherits */ }

Change values Based on DOM Context

Custom properties Capture a Value

Somewhere in the cascade

html { --action: red; }
main { --action: green; }
aside { --action: blue; }

And then… That Value Inherits

Through the DOM

button { background: var(--action); }

See the Pen Custom Properties Demo: Buttons by @miriamsuzanne on CodePen.

Define Nowhere

var( --undefined , fallback) 

button {
  background: var(--btn-color, teal);
}

var( --undefined, fallback )

Allows List Values

var(--my-font, Baskerville, Georgia, serif)

Nested Fallbacks 

button {
  background: var(--btn-color, var(--action, teal));
}

Font Stacks

font-family: Consolas, Menlo, 'Courier New', monospace;

Warning Not for Legacy Support

Browser Fallbacks 

button {
  background: teal;
  background: var(--btn-color, var(--action, teal));
}

Browser Fallbacks 

html { background: red; }

@supports (--css: variables) {
  html { background: green; }
}

CSS Variables Manage Dynamic Changes

User Preferences

See the Pen Custom Property Light/Dark by @miriamsuzanne on CodePen.

Attribute Patterns

  • [attr] ➡ Presence (even if empty)
  • [attr="..."] ➡ Exact match
  • [attr*="..."] ➡ Any match
  • [attr~="..."] ➡ Space-delimited (like classes)
  • [attr|="..."] ➡ Hyphen-delimited
  • [attr^="..."] ➡ Starts with…
  • [attr$="..."] ➡ Ends with…
  • [attr="..." i|s] ➡ Case sensativity

See the Pen Custom Property Themes by @miriamsuzanne on CodePen.

Media Queries

See the Pen Variables & Media Queries by @miriamsuzanne on CodePen.

Variations on a Default

See the Pen Variables Grid Areas by @miriamsuzanne on CodePen.

Safe Inline Styles

See the Pen Dynamic CSS Layouts by @miriamsuzanne on CodePen.

Interaction States

See the Pen Layering State & Type by @miriamsuzanne on CodePen.

Custom Cascades

Defined Properties

For Changing State/Type

Open Arguments

For Inheriting Context

Custom Longhand

See the Pen Custom **Longhand** by @miriamsuzanne on CodePen.

CSS Functions & Mixins

See the Pen Variables » Functions » Mixins by @miriamsuzanne on CodePen.

See the Pen CSS gradient-art decorations by @miriamsuzanne on CodePen.

See the Pen Angled Background CSS-Only Mixin by @miriamsuzanne on CodePen.

Component Arguments

See the Pen Media Object by @miriamsuzanne on CodePen.

Data Visualizations

See the Pen Bar Charts with Scale by @miriamsuzanne on CodePen.

Check For A11y

When manipulating data tables

JavaScript Interactions

See the Pen Custom Property Color Palettes by @miriamsuzanne on CodePen.

html {
  @media (prefers-color-scheme: dark) {
    --os-mode: -1;
  }

  @media (prefers-color-scheme: light) {
    --os-mode: 1;
  }
}

[data-colors='light'] {
  --html-mode: 1;
}

[data-colors='dark'] {
  --html-mode: -1;
}

[data-colors] {
  --mode: var(
    --html-mode, var(
      --user-mode, var(
        --os-mode, 1
      )
    )
  );
}

See the Pen Vue Invaders! by @miriamsuzanne on CodePen.

Even more With Houdini

💥 XTREME 💥

(design isn’t always practical)

Custom Properties Are Not Just Variables

(as we’ve known them)

Our medium is not done. Our medium is still going through radical changes.

– Jen Simmons, Designing with Grid

Sass Variables… Development Shortcuts

  • Global Tokens
  • Reusable Mixins
  • Pre-Compiled Functions

Custom Properties Dynamic & Responsive Styling

Capture values Where Defined

Change values Based on State or Class

Inherit Values Based on Context

  • Contextual tokens
  • Dynamic Visualizations
  • Component Settings
  • User Interactions

💥 XTREMEly Practical 💥

💥 XTREMEly Useful 💥

💥 XTREMEly Dynamic 💥

For defining Systems & Components

The Web Is Responsive