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:
- CSS is a Domain-specific, Declarative Programming Language
- Browser Internals in < 800 Words
- Algorithms 101
- What is a CSS Algorithm?
- 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
- Collection of CSS Algorithms on CodePen.
- Aspect Ratio
- CSS triangles with borders
- Viewport unit font-sizing
This talk is really a synthesis of all of these ideas, and more:
- What is a Programming Language? Will Crichton
- What is Programming, anyway? Felienne
- How We Talk About CSS, Rachel Andrew
- Pattern Patter, Ethan Marcotte
- BEM IT, Harry Roberts
- Single Responsibility Principle in CSS, Harry Roberts
- Atomic Design, Brad Frost
- Resilient, Declarative, Contextual, Keith J. Grant
- SUITCSS, a naming convention
- Further Notes on the Scenius, Austin Kleon
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)
.u-glueas an example algorithm
- Not going to wear that shirt again for a talk
v1.2 @ js.la, 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
Favorite Computer Science fundamentals resources:
- BaseCS blog series, Vaidehi Joshi. Read them all!
- BaseCS podcast, Vaidehi Josh & Saron Yitbarek
- Imposter’s Handbook, Rob Conery
- Four Semesters of Computer Science in 5 hours, Brian Holt on Frontend Masters (I haven’t watched this, but I bet it’s good!)
I wrote this series of blog posts summarizing my own Computer Science research:
- Series Intro
- Data Structures: Linked Lists
- Data Structures: Trees!
- Data Structures: Stacks & Queues
- Data Structures: Hash Tables
- Algorithms: Logarithms, Big-O, and Binary Search
On Programming Languages and Paradigms
- What is a Programming Language?, Will Chriton (particularly excellent article)
- Progamming Language, Wikipedia
- Programming Paradigms, Computerophile
- Programming Paradigm, Wikipedia
- Programming Across Paradigms, Anjana Vakil (her talks are 💯!)
- Lecture 1 | Programming Paradigms, CS107 course at Standford
Imperative vs. Declarative
- Declarative Programming and the Web, Scott Reynen
- Declarative Programming, Fun Fun Function
- HTML IS a Programming Language (Imperative vs Declarative), Computerphile
- Thoughts on Imperative and Declarative, Jakob Kallin
- CSS3 Proven to be Turing Complete, My Codeworks
- Khan Academy course on Algorithms
- Introduction to Algorithms, Thomas Cormen (very dense and not a good starting point, and a quick Google search will reveal a free PDF)
- Inside a super fast CSS engine: Quantum CSS (aka Stylo), Lin Clark (this is particularly great)
- So how does the browser actually render a website, Ryan Seddon
- Critical rendering path – Crash course on web performance (Fluent 2013), Ilya Grigorik
- How Browsers Work: Behind the scenes of modern web browsers, Tali Garsiel and Paul Irish
- Constructing the Object Model, Ilya Grigorik
- Reduce the Scope and Complexity of Style Calculations, Paul Lewis
- Exploring the CSSOM: Making a CSS Object Analyzer, Frank Taylor
- CSS Object Model Specification (W3C) and CSS Object Model (MDN)
- How CSS works: Parsing & painting CSS in the critical rendering path, Benjamin Johnson
- It’s Not Dark Magic: Pulling Back the Curtains From Your Stylesheets, Aimee Knight
- ShopTalk Show #306: Debugging CSS with Aimee Knight
The Cascade Deep-dive
- The Story of Stylo: Replacing Firefox’s CSS engine with Rust, Josh Matthews
- CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends, Heydon Pickering
- CSS video tutorial – 10 – CSS Cascade Vs CSS Inheritance, Chidre’sTechTutorials
- Cacscading and Inheritance, W3C
- Assigning property values, Cascading, and Inheritance, W3C
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!
- Servo (Mozilla): mozilla-central/servo/components/style
- Blink: chromium/src/third_party/blink/renderer/core/css/
A few files to get you started:
- Servo: servo/components/selectors/builder.rs – Contains specificity.
- Servo: /servo/components/style/properties/longhand – Directory of all (longhand) properties.
- Servo: servo/components/style/rule_tree/mod.rs – Constructs the rule tree. Contains more explicit implementation of the cascade, nicely commented!
- Blink: blink/renderer/core/css/css_calculation_value.cc This is calc()!
- Blink: blink/renderer/core/css/parser/css_tokenizer.cc The CSS Tokenizer.
- Blink: blink/renderer/core/css/parser/media_condition_test.cc – A test for parsing media queries.
A few other very awesome and relevant resources:
- Where Does CSS Come From?, Rachel Andrew at CSSConf EU 2017
- CSS Variables: var(–subtitle), Lea Verou CSSConf.Asia 2016
- CSS and the hierarchy problem: What makes a CSS developer? Ivana McConnell at CSS Conf EU 2017
- Resilient Web Design, Jeremy Kieth (read for free online or listen to it as a podcast!)
- Resilient CSS on Layout Land, Jen Simmons (but watch all of Layout Land, really!)
Example CSS Algorithms
(but watch v2.0 for up to date examples)