slides.oddbird.net/cascade-aligned/front-range20/

Cascade Aligned Programming

Miriam Suzanne @ Front Range Front-End

What is Cascade Aligned Programming?

¯\_(ツ)_/¯

We’re here to figure that out…

Object Oriented CSS
& Functional CSS

Developed from non-cascading languages

The Cascade

Is fundamentally different

Understand the (wierd) Mental Model

The first world wide website & graphic browser
NeXT computer with a worn-out sticker
Old IBM desktop

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

– WWW Project

A zillion different devices of all sizes (original)

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

– WWW Project

😬

The second browser, a text-only terminal

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

Browser Support is Not A Binary

1993-1994… Style Wars

w3.org/Style/History/

Cascading HTML style sheets

Håkon Lie, October 1994

Need to support Style Systems 

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

A simple mapping between HTML elements and presentation hints.

– Håkon Lie 

p {
  color: rebeccapurple; 
}
<p> … </p>
<p> … </p>
<p> … </p>

CSS Selectors

  1. Inline style="…"
  2. Unique #IDs
  3. Reusable .classes & [attributes]
  4. Element types
  5. Universal *
button          { background: gray; }
.action         { background: darkblue; }
[type=“submit”] { background: darkgreen; 
                  background: var(--submit); }
#send           { background: maroon; }
<button    style=“background: darkviolet;”
  id=“send” class=“action” type=“submit”>…</button>

💥 Conflict! Mutliple background
On The Same <button>

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

The 🌊 Cascade Resolves 💥 Value Conflicts

  1. 🗺 Style Origins

  2. 🎯 Selector Specificity
  3. ⏭ Source Order

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

– Håkon Lie

An ordered list (cascade) of style sheets … can be referenced from the same document.

– Håkon Lie

Potentially From Different 🗺 Origins…

🖥 User Agent (Browser), 👥 User, or 🎨 Author

Balance of Intent

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

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

– Håkon Lie

Stacked in Layers

  1. 🎨 Author
  2. 👥 User
  3. 🖥 User Agent

Balance of Power

If conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

– Håkon Lie

The Real Reason For ❗importance

  1. ❗🖥 User Agent Important
  2. ❗👥 User Important
  3. ❗🎨 Author Important
  4. 🎨 Author Styles
  5. 👥 User Preferences
  6. 🖥 User Agent Defaults

Balance of Support

Provide hints that the browser may or may not use.

– Håkon Lie

Design for The Unknown

Sizes, Interfaces, Preferences, Content, &c…

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

There’s always A Fallback Option

  1. 🗺 Style Origins

  2. 🎯 Selector Specificity

  3. ⏭ Source Order

A Layering System

From… Broad Patterns
to Specific Overrides

Different Intents

  • universal/type » Global Defaults
  • attrs » Common Patterns
  • attrs > attrs » Reusable Components
  • ID » Singular Overrides

Each Selector has a Weight Based on How Specific It Is

Often Represented by Numbers Using Factors of 10

(but I don’t recommend it)

  • 1000 – Inline styles
  • 100 – Unique IDs
  • 10 – Reusable classes & attributes
  • 1 – Element types
  • 0 – Universal *
/* 1  +  10  +     10      + 0  == 21 */
button.action[type=“submit”] * {   …   }

By That Logic… 

/* 10 +  10 +  10 +  10 +  10 +  
   10 +  10 +  10 +  10 +  10  = 100 */
.class.class.class.class.class
.class.class.class.class.class {  …  }

/* 100 = 100 */
#id    {  …  }

10*10!=100

👎 Don’t Bother

small numbers are easier

More Like Versioning v3.9.5

More Like Versioning v3.10.5

More Like Versioning v3.11.5

More Like Versioning v3.462.5

More Like Versioning v3.462.5 < v4.0

Only the First Number Matters 2.5.1 or 1.12.2 or 1.3.42

Only the First Number Matters 2.5.1 or 1.12.2 or 1.3.42

Move on When Tied 1.12.2 or 1.3.42

Move on When Tied 1.12.2 or 1.3.42

Coin-sorter using different-sized column slots
Coin-sorter, with empty columns crossed out
Coin-sorter, all but the largest column crossed out
  1. 🗺 Style Origins
  2. 🎯 Selector Specificity

  3. ⏭ Source Order

The Final Declaration Wins

(unless it doesn’t)

[type=“submit”] { 
  background: darkgreen; 
  background: var(--submit); 
}

The 🌊 Cascade Filters Out Extra Values

🧬 Inheritance Fills In Missing Values

🧬 Inheritance helps us… Paint in Broad Strokes

🧬 Inheritance helps us… Keep code DRY

CSS is Doing The Impossible

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

– Rachel Andrew, 2018

Graphic design of unknown content on an infinite and unknown canvas, across operating systems, interfaces, & languages…

– me, on twitter…

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

CSS is 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 

[type=“submit”] { 
  background: darkgreen; 
  background: var(--submit); 
}

Font Stacks

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

@Supports { … }

Cascade Aligned Programming… Is a Progressive Enhancement

CSS is Declarative

Relying on Meaning & Intent

16px != 1em

1fr != 50%

We provide… HINTS & SUGGESTIONS

Cascade Aligned Programming… Is a Progressive Enhancement

CSS is Contextual

Because… Design is Contextual

@media (min-width: 30em)

Cascade Aligned Programming… Has to Adapt & Respond

Also because… We’re Collaborating

@media (
prefers-color-scheme: dark
)

Cascade Aligned Programming… Respects Other Origins

The Cascade Is About Balancing Concerns

Balancing Branding with Preferences

Balancing Systems with Details

Balancing Context with Modularity

Balancing Control with Resilience

We Define… Minimal Constraints

We Communicate… Relationships & Intent

CSS Provides… Relative Units

CSS Provides… Intrinsic Sizing

CSS Provides… Normal Flow

We express Hints & Suggestions

Clear Semantics Help the Browsers

Make informed decisions

Help the Browsers Help the Users

Help other Developers

Read & understand & maintain the code

It takes craft to set up the circumstances that are simple and yet contain the ambiguities and the incongruity of human experience.

– Anne Bogart

What Have We Tried?

Headshot of Natalie Downe

@natbat Natalie Downe

2008 CSS Systems

Writing Maintainable CSS by Natalie Downe | Barcamp London 5 28th September 2008

~2007 Major Grid Frameworks

Blueprint, 960gs, etc…

Central Class Library

<div class=" column col6of12 last " >

One Universal Grid

Hard to Customize

CSS frameworks decrease the maintainability of code.

– Natalie Downe

CSS Systems Conventions > Frameworks

  • Shared Vocabulary
  • Reusable Patterns
  • Personalized Styles

CSS Ordering Based on Specificity

  1. Elements grouped by Type
  2. Classes grouped by Effect
  3. IDs grouped by Component

1… General Styles

  • body styles
  • reset
  • links
  • headings
  • other elements, tags

2… Helper Styles

  • forms
  • notifications
  • errors
  • consistant items with normally just one class

3… Page Structure

  • header
  • footer
  • generic layout blocks
  • skeleton including page furniture

4… Page Components

“most of your styles will be in here”

5… Overrides

avoid as much as possible

Layouts with Fluid Internals 

#container {
  width: /* em values preferred */;
  max-width: 100%;
}
.any-internal { /* % values only */ }

Don’t Overly Sandbox

Styles should be reusable…

Focus on What Not Where 

div#page div.teaser ul.products li p.name { … }
.products .name { … }

Up & Down Font Size Constantly

Dont Re-engineer Seperate Solutions

For individual browsers

  1. Define it
  2. Develop it
  3. Maintain it
  4. Communicate it
Headshot of Nicole Sullivan

@stubbornella Nicole Sullivan

2009 Object Oriented CSS

Code re-use is almost non-existant.

– Nicole Sullivan, OOCSS

Leads to bloat… Code Size 1:1 with Components

A CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.

– Nicole Sullivan, OOCSS

Systemic design Beyond Reusable Components

Components Share Patterns

More layers of design abstraction…

1. Separate Structure & Skin

Object Structure Minimal & Reusable

Object Skin Multiple Theme Options

Separate Container & Content

“Rarely use location-dependent styles”

CSS clearly uses Object-Oriented Language

We Style Objects

Individual elements on the page

Objects can… Belong To a Class

Objects can… Have Individual Attributes

Object Composition

.person class contains .name & .address classes

Enter Brad Frost… Atomic Web Design

A design process based on composition

label, input, and button atoms
search form molecule, with label, input, and button
banner organism, with logo, navigation, and search
wireframe of a full page

2009-Present Systems/Objects Repackaged

SMACSS, BEM, Atomic Design, ITCSS, etc…

SMACSS += OOCSS

SMACSS Organized on Category

  1. Base (element type)
  2. Layout (use #id)
  3. Module (use .classes)
  4. State (use !important)
  5. Theme (i.e. “skin”)

ITCSS += CSS Systems

Updated with OOCSS & pictures

Narrow/Broad Reach How Many Elements?

Low/High Specificity What Selector Weight?

Generic to Explicit What Desired Impact?

From p {} through .text-center {}

OddBird mix-and-match… Organized by Reach & Complexity

  1. Tools
  2. Config
  3. Initial
  4. Patterns
  5. Layouts
  6. Components

CSS Systems + OOCSS + ITCSS + Atomic Design + …

Using JS Frameworks… Single File Components

Component Styles “Scoped”?

Scope Is About Ownership

Not just Is-Inside-Of

(no lower boundary)

But specifically Is-Owened-By

(clear lower boundaries)

See the Pen Isolation Donut by @miriamsuzanne on CodePen.

<article-component>
  <h2>...</h2>

  <sub-component />

  <footer>...</footer>
</article-component>
<article-component data-scope='article'>
  <h2 data-scope='article'>...</h2>

  <sub-component data-scope='article' data-scope='sub'>
    <!-- internals of sub only have scope='sub' -->
  </sub-component>

  <footer data-scope='article'>...</footer>
</article-component>
<style scoped>
  article { ... }
  h2 { ... }
  footer { ... }
</style>
article[data-scope=article] { ... }
h2[data-scope=article] { ... }
footer[data-scope=article] { ... }
<article data-scope="article instance-id">
h2[data-scope~=article] { 
  /* all instances */ 
}
h2[data-scope~=instance-id] { 
  /* unique instance */ 
}

Naming Conventions

Not explicit in most…

BEM Block Element Modifier

Block Standalone Entity

Meaningful on its own

Element Always Part Of A Block

No standalone meaning

Modifier Change Appearance Or Behavior

A flag on a block or element

Not Size or Complexity Self-Sufficiency & Belonging

Selector Naming

.block » .block__element » .block__element--modifier

👍 Clarity Of Relationship Structure

👎 Flattening Of Selector Structure

Everything is equal specificity

👉 Combine Selectors Match Scope & Specificity

In meaningful ways

SMACSS Layer Prefixes

.l-<layout> | .is-<state>

State Types

.is-collapsed, .msg.is-error, .is-hidden

Use Built-In Attributes When Available

is-hidden

[aria-hidden] & [hidden] & ??

is-collapsed

[aria-expanded] & [aria-pressed]

Customize to Namespace Related States

.is-success | .is-error ➡ [data-msg="success | error"]

Base Attribute

[data-btn]

Attribute Variations

[data-btn~='success']

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

Recent trends… Atomic CSS » Functional CSS

We’ve always had Utility Classes

From .clearfix to .column3of12 and .sr-only

Utilities Only? 

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="…" alt="">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">…</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">…</a>
    <p class="mt-2 text-gray-600">…</p>
  </div>
</div>

CSS can be
 Functional In Some Ways

p.alert.error

Composed result of p, .alert, & .error functions

Selectors can Never Be “Pure”

CSS is All About Context

CSS is All About Side Effects

Going all-in Only Moves The Problems

From CSS to HTML

Use Utility Classes For Meaningful Utilities

.sr-only | .clearfix | .elide-text

DRY Code Don’t Repeat Yourself

.warning { border-color: red; }

DSfP Don’t Stretch for Patterns

.bc-r { border-color: red; }

What is Cascade Aligned Programming?

Express Layers of Intent

A Wider 🌊 Cascade Allows More Nuance in Layering

W3C Should Update & Extend The Cascade

More 🎯 Nuance

e.g. :where()

“scoped” styles? Custom Elements
& Web Components

Custom Author Layers?

Triangle, point down, with layers: settings, tools, generics, elements, objects, components, overrides

CSS Custom Properties 

button {
  background: var(--btn-state, var(--btn-type, var(--btn-default)));
}

The Cascade is Important

The Cascade is Useful

The Cascade is Not Going Away

Learn To Use It