slides.oddbird.net/layers/aea-sf22/

Cascading Layers of !mportance

slides.oddbird.net/layers/aea-sf22/

Miriam Suzanne @ An Event Apart, San Francisco
Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled 'Use the Cascade'

The ‘C’ in…

CHSS

Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994
Back to the future flaming tire tracks between Doc and Marty's legs, as they look back in surprise.
The first world wide website & graphic browser
Zoom in on NEXT logo in top right corner of the browser
Old IBM desktop
The second browser, a text-only terminal

Web for all. Web on everything.

– W3C Mission, Design Principles

Old IBM desktop
Modern desktops
A zillion different devices of all sizes (original)
Braille interface and headphones
Lineup of smart watches
Google Home, Amazon Echo, and Apple HomePod
A gray office covered in cobwebs, and a Getty Images watermark.
Indiana Jones covered in cobwebs, looking frustrated.
info.cern.ch HTML Design Constraints, screenshot

It is required that HTML be a common language between all platforms…

– WWW Project

…This implies no device-specific markup, or anything which requires control over fonts or colors.

– WWW Project

Web Design Will Never Happen

@mia@front-end.social

Miriam Suzanne

Not a Lack of Design

The second browser, a text-only terminal
The first world wide website & graphic browser
Jeremy Keith on stage next to a slide that says Control in the center, with Imperative and Declarative above and below

A lack of Design Control

InDesign book-cover layout for Riding SideSaddle, my novel in a box
Final novel-in-a-box, Riding SideSaddle
Same photo, but with a badly overlaid cursor pointer and three big scribbled red question marks
Final novel-in-a-box, Riding SideSaddle

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, 2000

The Web Should Adapt…

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

We’re designing dynamic content with unknown collaborators on an infinite and unknowable canvas, across operating systems, interfaces, writing-modes, & languages…

– me

Styles Must be Responsive

…And Collaborative

We're Not Alone (in big block letters, in space)
Same We're Not Alone, with browser logos on top
Same We're Not Alone, with browser logos and a guy in construction clothes carrying a laptop
Same We're Not Alone, with browser logos, a guy in construction clothes carrying a laptop, and ET
InDesign book-cover layout for Riding SideSaddle
The second browser, a text-only terminal
The first world wide website & graphic browser

HTML totally eliminates any visual creativity that a document’s designer might have.

– Roy Smith, 1993

Mosaic browser

The web would have become a giant fax machine where pictures of text would be passed along.

– Håkon Lie

1993-1994 w3.org/Style/History/

Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994

This proposal tries to soften the tension between the author and the reader.

– Håkon Lie

The author often wants to give the documents a distinct look and feel…

– Håkon Lie

…the user will set preferences to make all documents appear more similar.

– Håkon Lie

The user/browser specifies initial preferences and hands the remaining influence over to the document [authors].

– Håkon Lie

Provide hints that the browser may or may not use.

– Håkon Lie

The second browser, a text-only terminal

CSS Declarations 

property: value;

color: blue; 

<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button>…</button>
<button>…</button>
<button>…</button>
button { color: violet; }
<link rel="stylesheet" href="so-many-hints.css">
<style>...</style>

An ordered list (cascade) of style sheets. Referenced from the same document.

– Håkon Lie

💥🙈⁉️💥 

<button style='color: blue'>…</button>
button { color: violet; }

Multiple or Unknown ⁉️ 

color: teal;
color: violet;
color: oklch(79.269% 0.171 70.67);

On every html element
For every css property
We need exactly one value

Christopher Lambert as The Highlander in kilt and cloak with a sword, and the text There Can Be Only One

Rules for… Cascading filters out
Inheritance fills in

Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled 'Use the Cascade'
Tina Turner as Aunty Entity in the Mad Max Thunderdome, with the law 'Two styles enter, one style leaves' in bold text
Mechanical coin sorter on a table, with a ramp at the top and a small-to-large series of slots
Same coin sorter, with all slots crossed off except for the largest one with coins in it, and an arrow pointing at those coins that says 'move on'
Mechanical coin sorter on a table, with a ramp at the top and a small-to-large series of slots

Origins… Who Requested The Style?

Same We're Not Alone, with browser logos, a guy in construction clothes carrying a laptop, and ET

Importance… How Much Do They Care?

The user/browser specifies initial preferences…

– Håkon Lie

🖥 Browser Defaults

Officially… 🖥 User Agent Styles

Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994 
body { margin: 8px; }
a:link { color: blue; }
div, section, article, p, ol, ul /* etc */ {
  display: block;
}
h1, h2, h3, h4 /* etc */ {
  font-weight: bold;
  font-size: something big I dunno;
}
One big block of text with no white-space or line breaks

👥 User Styles

Establish desired preferences

Jeremy Keith on stage next to a slide that says User Stylesheets
Language and appearance preferences in Firefox include light/dark mode, colors, fonts, and zoom level
2000s era DreamWeaver interface with toolbars and menus, a small window for code, and a small browser window showing a table layout for something called MyWebDesignCourse
The WebFlow interface with an element tree on the left and GUI for CSS on the right and a big window showing the webflow logo and tagline - the easiest guide to WebFlow for beginners

🎨 Author Styles

Cascade 🗺 Origins

  1. 🖥 User Agent Defaults (applied first)
  2. 👥 User Preferences (override defaults)
  3. 🎨 Author Styles (so powerful)
Darth Vader choking a rebel soldier as storm troopers watch

If conflicts arise the user should have the last word…

– Håkon Lie

Kylo Ren and Rey standing in front of an entire star war with spaceships and lasers and AT-AT walkers

Why we have… ❗importance

Jeremy Keith on stage next to a slide that says h1.font.size = 24pt 100% h2.font.size = 20pt 40%

Simplified Influence 

h1 { font-size: 24pt !important; } /* 100% */
h2 { font-size: 20pt; } /* 0% */
Spock Spock with a goatee
  1. ❗🎨 Author Important (goes first)
  2. ❗👥 User Important (override authors)
  3. ❗🖥 User Agent Important (most power)
  1. 🖥 User Agent Defaults
  2. 👥 User Preferences
  3. 🎨 Author Styles
  4. ❗🎨 Author Important
  5. ❗👥 User Important
  6. ❗🖥 User Agent Important
In the font preferences dialogue, a default-checked option: Allow pages to choose their own fonts, instead of your selections above

The purpose of… ❗importance

Authors 👎🏼 Override Styles

We probably wrote ourselves

Users 👍🏼 Protect Styles

From future origins

Often Isolated

  1. …
  2. …
  3. 🎨 Author Styles
  4. ❗🎨 Author Important
  5. ❗…
  6. ❗…
Mechanical astrolabe with Earth at the center, and concentric rings for other planets/stars
Clockwork orrery, with planets circling the sun, and the earth off to one side
Clockwork orrery, with a scribbled arrow pointing to the earth tilt gears labeled 'specificity'

(out of order…) CSS Selectors & Specificity

How Specifically

Is a selector targeting elements

AEA Denver website with an hotpink dashed outline around every element on the page
AEA Denver website with an hotpink dashed outline around only the logo

More Specific Styles
Likely
More Important

Heuristic

a practical assumption that approximates the goal

universal/type » Global Defaults

attrs/classes » Common Patterns

IDs » Singular Overrides

Four layers

  1. Universal * (go first)
  2. Element types
  3. Reusable .classes & [attributes]
  4. Unique #IDs (most power)
inverted triange, with range accross the top, and specificity/explicitness down the sides
Triangle, point down, with layers: settings, tools, generics, elements, objects, components, overrides
A graph with specificity on the vertical axis, and code line numbers horizontal, divided into layers, and a line showing that specificity should only increase throughout the code base

Heuristics Are Assumptions

Assumptions Often Fail

Especially “At Scale”

/* …default table styles… */
table[rules=cols i] > tfoot > tr > td,
table[rules=cols i] > tfoot > tr > th,
table[rules=all i] > tfoot > tr > td,
table[rules=all i] > tfoot > tr > th {
  border-color: black;
}
[hidden] {
  display: none !important;
}

One Flexible Layer

  1. Universal *
  2. Element types
  3. Reusable .classes & [attributes]
  4. Unique #IDs
.block .element.modifier { /* 3 */ }
.block__element--modifier { /* 1 */ }
A graph with specificity on the vertical axis, and code line numbers horizontal, divided into layers, and a line showing that specificity should only increase throughout the code base

❗important 

.🤬-bootstrap {
  font-weight: bold !important;
}

😩🤬😩

Cascade Layers

Data on support for the css-cascade-layers feature across the major browsers from caniuse.com
OddBird article, Cascade Layers – There’s a Polyfill for That! by Sana Javed on June 21, 2022
Triangle, point down, with layers: settings, tools, generics, elements, objects, components, overrides 
@layer settings { … }
@layer tools { … }
@layer generic { … }
@layer elements { … }
@layer objects { … }
@layer components { … }
@layer overrides { … }
  1. @layer settings { … }
  2. @layer tools { … }
  3. @layer generic { … }
  4. @layer elements { … }
  5. @layer objects { … }
  6. @layer components { … }
  7. @layer overrides { … }
  1. @layer Utilities { … }
  2. @layer Components { … }
  3. @layer Themes { … }
  4. @layer Frameworks { … }
  5. @layer Resets { … }
@layer reset {
  audio[controls] { display: block; }
  [hidden] { display: none !important; }
}

Layers of Specificity

Specificity is Contained 

@layer {
  #menu .dropdown .menu-item {
    /* ✅ specificity! */
  }

  .menu-item { /* … */ }
}
@layer my-defaults {
  #menu .dropdown .menu-item { /* … */ }
}

@layer my-overrides {
  .menu-item { /* ✅ layer! */ }
}

@layer { … }

@layer <name> { … }

@import url(…) layer(<name>); 

@layer default { /* least powerful */ }
@layer theme { /* … */ }
@layer components { /* more powerful */ }

/* unlayered styles: most powerful */
@import url(low.css) layer(low); /* new layer! (1) */
@layer medium { /* new layer! (2) */ }
@layer low { /* (1 again) */ }
@layer high { /* new layer! (3) */ }
@layer low { /* (1 again) */ }

Repeated Layers Are Sorted Together 

@import url(low.css) layer(low); /* (1) */
@layer low { /* (1) */ }
@layer low { /* (1) */ }
@layer medium { /* (2) */ }
@layer high { /* (3) */ }

Explicit Layer Order

Define it once, at the start

@layer <name>, <name>, <etc>; 

/* establish layer order */
@layer low, medium, high;

/* add code to layers as needed */
@import url(medium.css) layer(medium);
@layer high { … }
@layer low { … }
@layer medium { … }

Nesting Layers 

@layer components {
  @layer state { … }
}

/* access nested layers */
@layer components.state { … }
/* system.css */
@layer theme { … }
@layer components { … }
@import url(system.css) layer(system);

@layer system.theme { … }
@layer system.components { … }
@import url(system.css) layer(system);

@layer system.theme { … }
@layer system.components { … }

@layer system.override { /* local overrides! */ }
@import url(bootstrap.css) layer(bs.external);

@layer bs.local {
  /* anything here will override bootstrap */
}
@layer components {
  @layer defaults, themes, state;
}

Not Escalating ❗️importance

Managing Priorities

Clockwork orrery, with a scribbled arrow pointing to the earth tilt gears labeled 'specificity'

Language Heuristics Don’t Boss Us Around

More Cascade Control

Fewer Specificity Hacks

Less ❗️mportance

Like Origins, ❗️mportant Layers Reverse

  1. Resets
  2. Themes
  3. Components
Kylo Ren and Rey standing in front of an entire star war with spaceships and lasers and AT-AT walkers

!important

  1. Resets
  2. Themes
  3. Components
  4. ❗mportant Components
  5. ❗mportant Themes
  6. ❗mportant Resets

Authors 👎🏼 Override Styles

We probably wrote ourselves

Use Layers!

👍🏼 Protect Styles

From future layers

@layer reset {
  [hidden] { display: none !important; }
}

Prioritize -> Layers
Protect -> Importance

Getting Started

my recommendations, your milage may vary

Establish A Layer Order 

/* first & easy to find */
@layer defaults, components, utilities;
<style>/* keep this before linked styles */
@layer defaults, components, utilities;
</style>
<link rel="stylesheet" href="…">

Then Layer Dependencies

resets, design systems, frameworks, libraries…

Clearly define… Each Tool’s Priority

Clearly define… Tool-Specific Overrides 

@import url(bootstrap.css) layer(bootstrap.vendor);

@layer bootstrap.overrides {
  /* anything here will override bootstrap */
}

As you go Update Layer Order

Then Layer Overall Architecture

For flexibility Layer Everything

Once we use un-layered styles, that’s as high as we can go

Working from Lowest to Highest

A graph with specificity on the vertical axis, and code line numbers horizontal, divided into layers, and a line showing that specificity should only increase throughout the code base

Single File Components? 

/* Vue example */
<template>…</template>
<script>…</script>

<style>
@layer components {
  /* all our component styles */
}
</style>

CSS-in-JS?

¯\_(ツ)_/¯

It depends on the tool

Good Tools Let Us Use CSS Features

(otherwise ‘tools’ become obstacle)

¯\_(ツ)_/¯

You do you (no gate-keeping)

As useful, Layer Inside Components

Nested Sub-Layers

Use layers To Provide Clarity

Use layers To Describe Intent

See the Pen Button layers by @miriamsuzanne on CodePen.

Convey Architecture

Design Systems

Tools & Frameworks

WordPress Themes

Rapid Prototypes

Not Just… ‘This is !mportant’

(layers lower importance by default)

Not an All-Or-Nothing Grenade

Encourages Nuanced & Explicit Priorities

X Overrides Y
Because
‘Components’ Override ‘Defaults’

As long as The Intent is Clear

There’s No Harm Layering

Also Not The Only Tool

Learn to Use Selectors

Without the Extreme Limitations 

.contact–submit__focus { /* … */ }
#contact button[type=submit]:focus { /* … */ }

Ways to Adjust Specificity 

[id="example"] {
  /* ID selector, class specificity */
}
:where(#example) {
  /* ID selector, zero specificity */
}

Re-learn ❗️mportant As Intended

👎🏼 Override Styles
In Previous Code

(often in lower layers)

👍🏼 Protect Styles
From Future Code

(often in higher layers)

For flexibility… Layer Everything

Use unlayered for Prototyping & DeBugging

(But not Every Individual Thing)

A grid of overlapping 'scope' columns (buttons, cards, logins) and 'layer' rows (default, theme, component). Each scope crosses all layers, and each layer crosses all scopes.

Also Coming Soon…

Scoped Styles

1. Avoid Naming Conflicts

(across large teams & projects)

2. By Expressing Membership

(through lower boundaries & proximity)

Scope Proximity 

.light-theme a { color: purple; }
.dark-theme a { color: plum; }

@scope (<root>) { /*…*/ } 

@scope (.light-theme) {
  a { /* similar to simple nesting… */ }
}
@scope (.dark-theme) {
  a { /* but the _closer_ scope root wins… */ }
}

See the Pen Scope proximity demo by @miriamsuzanne on CodePen.

Scope Boundaries 

.title { /* global */ }
.post .title { /* nested */ }

.post__title { /* BEM */ }
Media component with contents that are out of scope
wireframe of a site, with multiple nested components

Build-tools Provide Scoped Styles

BEM, CSS Modules, Vue, JSX, Stylable, etc

.post__title { /* BEM */ }
.title[data-JKGHJ] { /* Vue */ }

@scope (<root>) to (<boundary>) {…} 

@scope (.media) to (.content) {
  img { /* only images that are "in scope" */ }
}

See the Pen Visualizing scope by @miriamsuzanne on CodePen.

See the Pen Scope boundary demo by @miriamsuzanne on CodePen.

Nested <style> Scopes 

<article>
  <style scoped>
    p { color: green; } 
  </style>
  <p>This paragraph will be green.</p>
</article>

<p>This paragraph won't!</p>
<article>
  <style>
    @scope {
      p { color: green; } 
    }
  </style>
  <p>This paragraph will be green.</p>
</article>

<p>This paragraph won't!</p>

Different from Shadow-DOM Encapsulation

Diagram shows a widget with solid boundaries, which cannot be penetrated in either direction (global styles can't get in, widget styles can't get out)
Diagram shows a component with porous boundaries, all styles can penetrate, or establish their own lower boundaries

Broad-Reaching Scopes
&&
Narrow Component Scopes

Maybe Develop Scoping Conventions? 

@scope ([data-scope='media']) to ([data-scope]) {
  /* Stop scopes from overlapping? */
}

Still some Details to Work Out

prototype… Now in Chromium Canary

about://flags - experimental web platform features

Don’t Fear The Cascade

The Cascade is Our Most Powerful Tool

Core To CHSS

CSS?

Cascading Style Sheets?

CSS❗️

The cascade is Getting Major Upgrades

The cascade Expresses Architecture

The cascade Expresses Intent

The cascade Balances Priorities

Clockwork orrery, with planets circling the sun, and the earth off to one side
Same We're Not Alone, with browser logos, a guy in construction clothes carrying a laptop, and ET
Darth Vader choking a rebel soldier as storm troopers watch
Yoda leans on a walking stick among leaves

A Jedi uses the [Cascade] for knowledge and defense, never for attack.

– Yoda (almost)