Cascade Aligned Programming

@ 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

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

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

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

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”>

💥 Conflict! Mutliple background
On The Same <button>

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

The 🌊 Cascade Resolves 💥 Value Conflicts

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

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

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

– Håkon Lie

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

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

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 */


/* 100 = 100 */
#id {}

👎 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

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

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

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;

Cascade Aligned Programming… Is a Progressive Enhancement

CSS is Declarative

Relying on Meaning & Intent

Cascade Aligned Programming… Is a Progressive Enhancement

Cascade Aligned Programming… Has to Adapt & Respond

Cascade Aligned Programming… Respects Other Origins

The Cascade Is About Balancing Concerns

We Communicate… Relationships & Intent

Clear Semantics Help the Browsers

Make informed decisions

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

~2007 Major Grid Frameworks

Blueprint, 960gs, etc…

Central Class Library

<div class=" column col6of12 last " >

CSS frameworks decrease the maintainability of code.

– Natalie Downe

  • Shared Vocabulary
  • Reusable Patterns
  • Personalized Styles
  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

div#page div.teaser ul.products li {}

Dont Re-engineer Seperate Solutions

For individual browsers

  1. Define it
  2. Develop it
  3. Maintain it
  4. Communicate it

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…

Separate Container & Content

“Rarely use location-dependent styles”

CSS clearly uses Object-Oriented Language

We Style Objects

Individual elements on the page

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

2009-Present Systems/Objects Repackaged

SMACSS, BEM, Atomic Design, ITCSS, etc…

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”)

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

Not just Is-Inside-Of

(no lower boundary)

But specifically Is-Owened-By

(clear lower boundaries)


<sub-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' -->

<footer data-scope='article'>...</footer>
<style scoped>
article { ... }
h2 { ... }
footer { ... }
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…

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

👎 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,, .is-hidden


[aria-expanded] & [aria-pressed]

Customize to Namespace Related States

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

Attribute Variations


  • [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 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>


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

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

A Wider 🌊 Cascade Allows More Nuance in Layering

“scoped” styles? Custom Elements
& Web Components

CSS Custom Properties

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