slides.oddbird.net/layers/jsheroes/

Cascading Layers of !mportance

slides.oddbird.net/layers/jsheroes/

Miriam Suzanne @ JSHeroes, Romania
Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled 'Use the Cascade'

The ‘C’ in…

Cascading HTML style sheets -- a proposal, Håkon W Lie, 10 Oct 1994
The first world wide website in the WWW Hypermedia Browser/Editor, on the neXt desktop -- an exercise in global availability
Old IBM desktop
The second browser, a text-only terminal with numbered links for keyboard control

Web for all. Web on everything.

– W3C Mission Statement

A zillion different devices of all sizes (original)
Braille interface and headphones
Google Home, Amazon Echo, and Apple HomePod

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

– WWW Project, HTML constraints

Sketch notes for Sandrina's talk Full Stack Forms - most of the image is faded out, with a scribbled circle around different platforms, different UI challenges

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

– WWW Project, HTML constraints

Sir Tim at a computer showing a badly photoshopped image of the previous slide

Web Design Will Never Happen

Technology Is Political

The problem is Authors Having Control

We're Not Alone (in big block letters, in space)
Same We're Not Alone, with browser logos on top 
h1, h2, h3, h4 /* etc */ {
  font-weight: bold;
  font-size: something big I dunno; }
p { margin-block: 1em; }
a:link {
  color: blue;
  text-decoration: underline; }
The second browser, a text-only terminal with numbered links for keyboard control
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
Language and appearance preferences in Firefox include light/dark mode, colors, fonts, and zoom level
Designer: I want the focus outline to be 1px light gray User: Actually, I want to see where I am, let me see a focus outline. User Agent (the user's agent): Ok, I'll make it 10px black.

Early web… All Styles are Universal

The same on every website

Controlled by… User Preferences
& Browser Choice

We are all Web Users First

To understand CSS… Set Your Preferences

Mosaic browser
The second browser, a text-only terminal with numbered links for keyboard control

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

– Håkon Lie, 2014 interview

Historical Style Sheet proposals

… provide publishers with stylistic influence…

– Håkon Lie

… user should have the last word…

– Håkon Lie

… provides author and reader with the same notation for specifying style …

– Håkon Lie

Safari settings panel, advanced tab, with a red scribble highlighting a style sheet option, with none selected by default.
Language and appearance preferences in Firefox include light/dark mode, colors, fonts, and zoom level

CSS Declarations 

/* property: value; */
color: blue;

CSS Selectors 

p {
  background: white;
  color: mediumVioletRed;
}

<link rel="stylesheet" href="styles.css">

An ordered list (cascade) of style sheets.

– Håkon Lie

💥🙈⁉️💥 

<button style="color: teal" type="submit">…</button>
button { color: violet; }
[type=submit] { color: vibrant; }

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

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

Cascade 🗺 Origins

  1. 🖥 User Agent (Browser) Defaults
  2. 👥 User Preferences

Cascade 🗺 Origins

  1. 🖥 User Agent Defaults
  2. 👥 User Preferences
  3. 🎨 Author Styles
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

  1. 🖥 User Agent Defaults
  2. 👥 User Preferences
  3. 🎨 Author Styles
  4. ❗🎨 Author Important
  5. ❗👥 User Important
  6. ❗🖥 User Agent Important
Spock Spock with a goatee
Searching firefox user agent styles for important with 26 results, three visible setting area display none and fullscreen iframes border none, parring unset
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'

Selectors exist to… Select Elements for Styling

Layers of Abstraction 

#banner { /* single element */ }
.warning { /* class of elements */ }
p, li { /* type of element */ }
* { /* all of the elements */ }

Selectors make styling… More Efficient & Expressive 

form:has(:invalid) [type="submit"] { … }

In the Cascade Specificity is a Heuristic

How Specifically

Is a selector targeting elements

Assume we will… Start With Broad Generic Styles

Assume we will… Override With Targeted Styles

Inverted triangle with range across the top, and specificity/explicitness down the sides
Inverted triangle with layers, wide top to narrow bottom: settings, tools, generics, elements, objects, components, overrides
Inverted triangle with layers, wide to narrow - the top layers are labeled for pre-processor then highlighted layers with the star selector for global styles, type selector for generics, class selector for patterns, and id selector for components. Finally the overrides layer is marked as !important.
Slide graphing markov chain weights edited to be about specificity maybe? With the different nodes labeled #id, .class, and type

One Flexible Category

  1. Universal *
  2. Element types
  3. Reusable .classes & [attributes]
  4. Unique #IDs
.block .element.modifier { /* 3 */ }
.block__element--modifier { /* 1 */ }

/* don't touch */
.block__element--modifier { … }
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
Drawing of someone watching a dragon breath fire on burning skeletons, the guy labeled 'you' is saying 'my cascade!' - the dragon is labeled 'framework' and the flame is !important

😩🤬😩

Even the best Heuristics Are Assumptions

We need Explicit Tools

Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled 'Use the Cascade'. Sheeting action is covered by a scribble that says layers!
Slide with inadvertent and reckless quadrant asking what's layering? Edited to ask about cascade layering

Cascade Layers

See support data on the Web Features Explorer

@layer { … }

@layer <name> { … }

Prevent Leaks slide, edited to say prevent specificity leaks

Specificity is Contained

Higher layers win, with any selector

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

/* unlayered styles: most powerful */

See the Pen Layers live code by @miriamsuzanne on CodePen.

  • specificity & order
  • add one layer
  • add second layer
  • re-order layers
  • duplicate layer
  • add layer list
  • add nested layer
  • inspect with dev tools

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

@import url(system.css) layer(system);

/* system.css */
@layer theme { … }
@layer components { … }

@import url(system.css) layer(system);

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

Getting Started

my recommendations, your milage may vary

Establish A Layer Order 

/* first & easy to find */
@layer reset, design-system, components, utilities;

<style>/* keep this before linked styles */
@layer reset, design-system, components, utilities;
</style>
<link rel="stylesheet" href="…">

<style>
@layer reset, defaults, theme, components, utilities;
@import url(reset.css) layer(reset);
@import url(defaults.css) layer(defaults);
@import url(theme.css) layer(theme);
@import url(components.css) layer(components);
@import url(utilities.css) layer(utilities);
</style>

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.core);

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

As you go Update Layer Order

Work 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

As useful, Sub-Layer Inside Components

See the Pen Button layers by @miriamsuzanne on CodePen.

Slide originally said Don't leave things unfinished, changed to say un-layered

For flexibility Layer Everything

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

Only allow un-layered Prototyping & DeBugging

Single File Components?

No problem!

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

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

Tailwind or CSS-in-JS?

¯\_(ツ)_/¯

It depends on the tool

Good Tools Let Us Use CSS Features

(otherwise ‘tools’ become obstacle)

Use layers To Provide Clarity

Use layers To Describe Intent

Use layers To Convey Architecture

Not Just… ‘This is !important’

(layers lower importance by default)

X Should Override Y
Because
‘Components’ Override ‘Defaults’

Encourage Nuanced & Explicit Priorities

As long as The Intent is Clear

There’s No Harm Layering

Then Un-Learn Specificity-Driven Selectors

The best selectors Don’t Need Naming Conventions 

.form–-submit__invalid { /* ❌ */ }
form:has(:invalid) button[type=submit] { /* ✅ */ }

Bonus… Less Naming Things 

.form–-submit__invalid { /* ❌ */ }
form:has(:invalid) button[type=submit] { /* ✅ */ }

Bonus… Encourage Proper HTML 

.form–-submit__invalid { /* ❌ */ }
form:has(:invalid) button[type=submit] { /* ✅ */ }
Thumbs-up write conventions, Rock-n-roll code semantics

Don’t Fear Specificity Contain It

Re-learn ❗️important As Intended

Like Origins, ❗️important Layers Reverse

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

👎🏼 Override Styles

(that’s what layers are for)

👍🏼 Protect Styles

From future layers

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

Prioritize -> Layers
Protect -> Importance

The Cascade is Our Most Powerful Tool

A boy riding a dragon as it flies past an orange sunset, in a drawing. Caption has been altered to say The [cascade] is our friend.

It exists… To Balance Priorities

Express Architecture & Intent

The cascade is Getting Major Upgrades

Yoda leans on a walking stick among leaves

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

– Yoda (almost)

Designing With Code

Writing resilient and maintainable CSS

oddbird.dev/learn/courses/design-with-code/