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

Cascading Layers of !mportance

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

Miriam Suzanne @ An Event Apart, Denver

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

A lack of Design Control

InDesign book-cover layout for Riding SideSaddle, my novel in a box
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

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

The Goal… A Web That Adapts

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

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

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

– me

InDesign book-cover layout for Riding SideSaddle
Jason Grigsby on stage at AEA Denver, with a slide that shows outlines of a phone, tablet, and desktop with the headline 'And forget all of the resolutions in between'

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 user/browser specifies initial preferences and hands the remaining influence over to the document.

– 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 { 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

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 

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;
}
Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994
One big block of text with no white-space or line breaks

👥 User Styles

Establish desired preferences

Language and appearance preferences in Firefox include light/dark mode, colors, fonts, and zoom level
In the font preferences dialogue, a default-checked option: Allow pages to choose their own fonts, instead of your selections above

🎨 Author Styles

Cascade 🗺 Origins

  1. 🖥 User Agent (goes first)
  2. 👥 User (override browser)
  3. 🎨 Author (most powerful)
Darth Vader choking a rebel soldier as storm troopers watch

If conflicts arise the user should have the last word…

– Håkon Lie

Why we have… ❗importance

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
Kylo Ren and Rey standing in front of an entire star war with spaceships and lasers and AT-AT walkers

The purpose of… ❗importance

👎🏼 Authors Override Styles

👍🏼 Users Protect Styles

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

Dealing With Selectors 

.this-is a.selector {
  /* declarations: here; */
}

How Specific?

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

Heuristic

a practical assumption that approximates the goal

More Specific Styles
Likely
More Important

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;
}

😩🤬😩

If only this horse was a little faster…

– me

Rachel Andrews on stage talking about new web features

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 { … }

Layers of Specificity

@layer { … }

@layer <name> { … } 

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

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

  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 { /* least powerful */ }
@layer default { /* … */ }
@layer theme { /* … */ }
@layer components { /* more powerful */ }
/* unlayered styles: most powerful */

Specificity is Contained 

@layer framework {
  #menu .dropdown .menu-item {
    background: whitesmoke; /* ✅ specificity! */
  }

  .menu-item {
    background: lightcyan;
  }
}
@layer framework {
  #menu .dropdown .menu-item {
    background: whitesmoke;
  }
}
@layer override {
  .menu-item {
    background: lightcyan; /* ✅ layer! */
  }
}
@layer one { … }
@layer two { … }
@layer one { … }
@layer three { … }
@layer one { … }

Repeated Layers Are Grouped

Groups Stack In Order 

@layer generic {
  audio[controls] { display: block; }
}

@layer theme { /* … */ }

/* still a lower layer than "theme" styles */
@layer generic {
  [hidden] { display: none !important; }
}
@layer generic {
  audio[controls] { display: block; }
  [hidden] { display: none !important; }
}

@layer theme { /* … */ }

Explicit Layer Order

Define it once, at the start

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

/* establish layer order */
@layer one, two, three;

/* add code to layers as needed */
@import url(two.css) layer(two);
@layer three { … }
@layer one { … }
@layer two { … }

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.custom { … }
@import url(bootstrap.css) layer(bootstrap.theirs);

@layer bootstrap.ours {
  /* 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

!important

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

Protect Styles

From future layers

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

Prioritize -> Layers
Protect -> Importance

Getting Started

my recommendations, your milage may vary

Start with A Layer Order 

/* add as the first styles */
@layer reset, framework, components, utilities;
<style>/* keep this before linked styles */
@layer reset, framework, components, utilities;
</style>
<link rel="stylesheet" href="…">
<link rel="stylesheet" href="…">

Then Layer Dependencies

*Including inter-org dependencies

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

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>

As useful, Layer Inside Components

Nested Sub-Layers

See the Pen Button layers by @miriamsuzanne on CodePen.

Also for Design Systems

Also for WordPress Themes

Use layers To Provide Clarity

Use layers To Convey Architecture

Use layers To Describe Intent

Not Just… ‘This is !mportant’

(layers lower importance by default)

X Overrides Y
Because
‘Components’ Override ‘Defaults’

As long as The Intent is Clear

There’s No Harm Layering

Not an All-Or-Nothing Grenade

Encourages Nuanced & Explicit Priorities

Also Not The Only Tool

Learn to Use Selectors 

[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
Chris Coyier on stage, with a slide about CSS Modules scoping styles

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 Layers of Priority

The cascade Facilitates Collaboration

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)

Complete Guide to CSS Cascade Layers

https://css-tricks.com/css-cascade-layers/