The Algorithms of CSS: Sources

Posted June 1, 2018 in Research, Web Development

Hello, there! Thanks so much for your interest in my ongoing talk, The Algorithms of CSS. The talk debuted at CSSConf EU in Berlin in June of 2018, and has been given a few times since, and each time evolves accordingly. If this is your first time here, I recommend jumping right in to v2.0, but v1.0 is a classic.

I am also writing up the content in blog posts, gradually. Here’s what I have so far:

  1. CSS is a Domain-specific, Declarative Programming Language
  2. Browser Internals in < 800 Words
  3. Algorithms 101
  4. What is a CSS Algorithm?
  5. Writing CSS Algorithms

But don’t let that keep you from watching it! The slides are very cute and, I’ve been told, the presentation is entertaining! I certainly have fun giving it.

Version 2.0, Dec. 2018 – ?


v2.0 @ WordCamp US, Nashville: Video here.

  • Complete rewrite of second half to be more about tangible examples of CSS algorithms
  • Official definition for a CSS algorithm
  • Introduction of “pattern” as an alternative to “CSS algorithm”
  • Emphasis on power of the user interface/front-end as the bridge between product, design, and engineering on teams
  • Big thanks to David and Fred from WPShout for their excellent feedback as I was working on v2.0!

Important 2.0 Sources

CSS Algorithms:

This talk is really a synthesis of all of these ideas, and more:

Version 1.*, June-October 2018


v1.3 @ SIGNAL, San Francisco: Video here.

  • Added some commentary about the validity of Twitter polls about CSS (or anything, really)
  • Added .u-glue as an example algorithm
  • Not going to wear that shirt again for a talk

v1.2 @, Los Angeles: Video here.

  • Added “Browser Internals in < 5 minutes section”
  • Added big picture conclusion about an open definition of programming via Felienne’s talk.

v1.0 @ CSSConf EU, Berlin: Video here.

  • The debut of Algorithms of CSS in Berlin!
  • This was my first big conference talk, and I was extremely excited (and nervous).

Important, Foundational Sources

Computer Science

Favorite Computer Science fundamentals resources:

I wrote this series of blog posts summarizing my own Computer Science research:

On Programming Languages and Paradigms

Imperative vs. Declarative

On Algorithms

Browser Mechanics

The Cascade Deep-dive

The Source of CSS

I found the source of Servo (the rendering engine in Firefox) to be a bit more readable and commented (it is newer, after all), but the UI for navigating the source of Blink (a fork of the rendering engine in Webkit, used in Chrome and Opera), was great for getting a sense of the directory structure. Look at both!

A few files to get you started:

A few other very awesome and relevant resources:

Example CSS Algorithms

(but watch v2.0 for up to date examples)


What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

  • Nice talk 🙂

    really GOOD.

    Compose a Reply

  • you're amazing! Nice Talk and really opened my eyes! :D

    Compose a Reply

  • Hi La~u~ra 😊

    Thanks for sharing!
    You can add a new resource to Browser Mechanics section:

    "How browser rendering works — behind the scenes"

    Compose a Reply

    • Thanks for sharing, Joan! That's a great resource – really nice, readable description. I should read it every couple of months for a refresher.

      Compose a Reply

Submit a Comment