Cascading Styles pt. 1

Miriam Suzanne @ Smashing Conf Freiburg

September 6, 2023

Hello, Freiburg slides.oddbird.net/workshops/23-smashing-de/

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.

A World Wide Web
The Cascade

The first world wide website & graphic browser

The second browser, a text-only terminal

Web for all. Web on everything.

– W3C Mission, Design Principles

A zillion different devices of all sizes (original)

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

A lack of Design Control

A Radical Shift

InDesign book-cover layout
for Riding SideSaddle,
my novel in a box

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

Web styles… Must Be Contextual

Responsive to constant change

`@media` `min-width`

`@media` `prefers-reduced-motion`

`@media` `hover`

`@supports` `container-type: inline-size`

Not just Responsive…

…Also 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

Web styles… Must Be Resilient

WWW parsers should ignore tags which they do not understand, and ignore attributes which they do not understand of tags which they do understand.

– WWW Project

The web is designed for Progressive Enhancement

Provide hints that the browser may or may not use.

– Håkon Lie

CSS Declaration `property``:` value`;`

`display``:` grid`;`

Browsers Can Ignore Declarations

body {
  /* Browser default `display: block` */
  display: flex;
  display: grid;
}

Browser Support is Non-Binary

You can use it and not use it at the same time, because it works and it doesn’t work at the same time. It’s Quantum CSS! It’s Magic!

– Jen Simmons, Intro to Resilient CSS

Font Stacks

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

`@Supports` `{ … }`

We Already Know How To Do This

2010… Responsive Web Design™️

Not Re-Writing For Every Viewport

Providing Progressive Layers of Style

e.g. Mobile First

Browsers need To Understand Priorities

We provide The Meaning & Intent

Web styles… Must Be Declarative

`<h1>``Main header``</h1>`

<p>a paragraph</p>

`16px` `!=` `1em`

`flexbox` `!=` `grid`

Convey Different Intent

There are too many variables to consider. The point of CSS is to make it so you don’t have to worry about them all. Define some constraints. Let the language work out the details.

– Keith J Grant

See the Pen Rad by @miriamsuzanne on CodePen.

CSS is unlike anything else… designed for the realities of a flexible, multilingual, multi-device web.

– Rachel Andrew, 2018

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

– me

It’s difficult But Also Essential

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

– Roy Smith, 1993

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/

<CENTER>This text is centered</CENTER>

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">…</FONT></P>
</MULTICOL>

<p><font color="red"> … </font><p>
<p><font color="red"> … </font><p>
<p><font color="red"> … </font><p>
<p><font color="red"> … </font><p>
<p><font color="red"> … </font><p>
<p><font color="red"> … </font><p>

A simple mapping between HTML elements and presentation hints.

– Håkon Lie

CSS Declarations

provide the presentation hints

`color``:` `red``;`

CSS Selectors

provide the mapping

p { color: red; }

<p> … </p>
<p> … </p>
<p> … </p>

Entire Style Sheets

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

For Browsers… Every Property
on Every Element
Must Have a Single Value

🤯⁉️

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

A World Wide Web
The Cascade

The 🌊 Cascade Resolves 💥 Conflicts

Rules for… Cascading filters out
Inheritance fills in

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

Is it marked as !important?
Who requested the style?
Does it come from the shadow DOM?
Is it an inline style?
What cascade layer is it in? (new)
What is the selector specificity?
How close is the scope root? (proposed)
Which comes last?

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'

Origins… Who Requested The Style?

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, the user will set preferences to make all documents appear more similar.

– Håkon Lie

Importance… How Much Do They Care?

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

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

One big block of text
with no white-space
or line breaks

Initial Values are… Defined by Specification

Initial Values are… Specific to Each Property

Initial Values are… The Same On All Elements

`margin:` `0`

(even on paragraphs)

`color:` `canvasText`

(even on links)

`display:` `inline`

(even on divs)

👥 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

🖥 User Agent (goes first)
👥 User (override browser)
🎨 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

❗🎨 Author Important (goes first)
❗👥 User Important (override authors)
❗🖥 User Agent Important (most power)

🖥 User Agent Defaults
👥 User Preferences
🎨 Author Styles
❗🎨 Author Important
❗👥 User Important
❗🖥 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

in a rage-fueled display of brute force

👍🏼 Users Protect Styles

because legibility is important

Often Isolated

…
…
🎨 Author Styles
❗🎨 Author Important
❗…
❗…

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'

(Shadow) Context

For Custom Elements

(we won’t cover this in detail)

Hidden Element Structure

Including Default Styles

Like a custom User Agent Extension

Shadow styles Default Low Priority

Again… Importance is Defensive

For normal styles, light > shadow
For important styles, shadow > light

See the Pen Important Shadow Context by @miriamsuzanne on CodePen.

Web ‘Components’ Are Not Site Components

Element-Attached Styles

<!-- Element-attached/inline -->
<button style='color: blue'>…</button>

/* Selectors */
button { color: violet; }

CSS Selectors & Specificity

(we’ll come back to layers)

Dealing With Selectors

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

button          { background: gray; }
.action         { background: darkblue; }
[type=“submit”] { background: darkgreen; }
#send           { background: maroon; }

Each Selector has a Weight Based on How Specific It Is

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

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

Universal * (go first)
Element types (p, ul, body, etc)
Reusable .classes & [attributes]
Unique #IDs (most power)

Like Versioning… v3.10.1 `>` v3.9.12

Like Versioning… (ID)`.`(Class/Attr)`.`(Element)

#contact-form .actions button[type='submit']:active { }

/* Specificity 1.3.1 - 1 ID, 3 Attrs, 1 Element */
#contact-form .actions button[type='submit']:active { }

Often written with commas… Specificity of [1,3,1]

Compare from the left 1,0,2 `vs` 0,3,2 `vs` 0,2,3

Move on when tied 0,3,2 `vs` 0,2,3

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

Universal *
Element types
Reusable .classes & [attributes]
Unique #IDs

.block .element.modifier { /* 3 */ }
.block__element--modifier { /* 1 */ }

❗important

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

😩🤬😩

Cascade Layers

@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>)``;`

@layer settings { … }
@layer tools { … }
@layer generic { … }
@layer elements { … }
@layer objects { … }
@layer components { … }
@layer overrides { … }

@layer Utilities { … }
@layer Components { … }
@layer Themes { … }
@layer Frameworks { … }
@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

See the Pen Button layers by @miriamsuzanne on CodePen.

More Cascade Control

Fewer Specificity Hacks

Less ❗️importance

Like Origins, ❗️important Layers Reverse

Resets
Themes
Components

`!important`

Resets
Themes
Components
❗important Components
❗important Themes
❗important Resets

Protect Styles

From future layers

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

Prioritize `->` Layers
Protect `->` Importance

Not Just… ‘This is !important’

(layers lower importance by default)

X Overrides Y
Because
‘Components’ Override ‘Defaults’

See the Pen Cascade Work Template by @miriamsuzanne on CodePen.

Hello, Freiburg slides.oddbird.net/workshops/23-smashing-de/

The Cascade

The ‘C’ in…

CHSS

A World Wide Web

Web Design Will Never Happen

Miriam Suzanne

Not a Lack of Design

A lack of Design Control

A Radical Shift

Web styles… Must Be Contextual

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

Not just Responsive…

…Also Collaborative

Web styles… Must Be Resilient

The web is designed for Progressive Enhancement

CSS Declaration property: value;

display: grid;

Browsers Can Ignore Declarations

Browser Support is Non-Binary

Font Stacks

@Supports { … }

We Already Know How To Do This

2010… Responsive Web Design™️

Not Re-Writing For Every Viewport

Providing Progressive Layers of Style

Browsers need To Understand Priorities

We provide The Meaning & Intent

Web styles… Must Be Declarative

<h1>Main header</h1>

16px != 1em

flexbox != grid

Convey Different Intent

It’s difficult But Also Essential

1993-1994 w3.org/Style/History/

CSS Declarations

color: red;

CSS Selectors

Entire Style Sheets

💥🙈⁉️💥

For Browsers… Every Property on Every Element Must Have a Single Value

🤯⁉️

The Cascade

The 🌊 Cascade Resolves 💥 Conflicts

Rules for… Cascading filters out Inheritance fills in

Origins… Who Requested The Style?

Importance… How Much Do They Care?

🖥 Browser Defaults

Officially… 🖥 User Agent Styles

Initial Values are… Defined by Specification

Initial Values are… Specific to Each Property

Initial Values are… The Same On All Elements

margin: 0

color: canvasText

display: inline

👥 User Styles

🎨 Author Styles

Cascade 🗺 Origins

Why we have… ❗importance

The purpose of… ❗importance

👎🏼 Authors Override Styles

👍🏼 Users Protect Styles

Often Isolated

(Shadow) Context

For Custom Elements

Hidden Element Structure

Including Default Styles

Like a custom User Agent Extension

Shadow styles Default Low Priority

Again… Importance is Defensive

Web ‘Components’ Are Not Site Components

Element-Attached Styles

CSS Selectors & Specificity

Dealing With Selectors

Each Selector has a Weight Based on How Specific It Is

Heuristic

More Specific Styles Likely More Important

`@media` `min-width`

`@media` `prefers-reduced-motion`

`@media` `hover`

`@supports` `container-type: inline-size`

CSS Declaration `property``:` value`;`

`display``:` grid`;`

`@Supports` `{ … }`

`<h1>``Main header``</h1>`

`16px` `!=` `1em`

`flexbox` `!=` `grid`

`color``:` `red``;`

For Browsers… Every Property
on Every Element
Must Have a Single Value

Rules for… Cascading filters out
Inheritance fills in

`margin:` `0`

`color:` `canvasText`

`display:` `inline`

More Specific Styles
Likely
More Important

Like Versioning… v3.10.1 `>` v3.9.12

Like Versioning… (ID)`.`(Class/Attr)`.`(Element)

Compare from the left 1,0,2 `vs` 0,3,2 `vs` 0,2,3

Compare from the left 1,0,2 `vs` 0,3,2 `vs` 0,2,3

Move on when tied 0,3,2 `vs` 0,2,3

Move on when tied 0,3,2 `vs` 0,2,3

`@layer` `{ … }`

`@layer` `<name>` `{ … }`

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

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

`!important`

Prioritize `->` Layers
Protect `->` Importance

X Overrides Y
Because
‘Components’ Override ‘Defaults’