If this is your first time here and you want to watch the talk, here is the most recent version, delivered in September, 2019:
If you are short on time and want to get the gist, click through the slides:
My talk debuted at CSSConf EU in Berlin in June of 2018. Each time I give the talk it evolves accordingly, and this post contains links to my research as well as a changelog for the updates to each version.
I am also writing up the content in blog posts, (very) gradually. Maybe they will morph into a book, someday? Here’s what I have so far:
- CSS is a Domain-specific, Declarative Programming Language
- Browser Internals in < 800 Words
- Is CSS Turing Complete?
- Algorithms 101
- What is a CSS Algorithm?
- Writing CSS Algorithms
- Testing CSS Algorithms (!!): Part 1, Part 2, Part 3 coming soon)
- CSS/HTML a.k.a The Golden Springboard
Don’t let the written content keep you from watching the talk though! The slides are very cute and, I’ve been told, the presentation is entertaining. I certainly have fun giving it.
Version 3.*, June 2019 – ?
v3.6.1 @ Strange Loop, September 14, St. Louis, MO
- See the slides on Slideshare from v3.6.1
- Even though I submitted the JSConf US version that is more practice-based, I am choosing to do the “Is CSS a PL” version for this audience, and because it is freshest in my mind.
- Added another quote slide after “What is going on?”
- Removed Turing machine illustration
- Added slide with photo of Joan Clarke to point out that many others are responsible for the foundation of all modern devices (though Turing gets much of the credit)
- Removed the
a-story-arc-border-itemexample to trim for time
- Added a new illustration for the Thank You slide
- Added a slide for the PL Views data collection app! Take the survey here (http://bit.ly/pl-views)
v3.6.0 @ Abstractions, August 21, Pittsburgh, PA
- See the slides on Notist from v3.6.0
- Talk submitted was “Is CSS A Programming Language?”
- Reverted to “What is a PL?” story line from v3.1.0
- Removed “How to write a CSS algo” flow (that follows white board interview steps)
- Removed CSS unit test ideas
- Added back Turing section
- Added back silent square programming
- Fixed some mistakes where the bottom right Twitter handle text was too big on the slides
v3.5.1 @ JSConf US, August 14, Carlsbad, CA
(This version would more accurately be 4.1.0 but I really messed up the versioning now)
- See the slides on Notist from v3.5.1
- Very similar to CSS Camp version
- Added slide of flex-wrap Servo Rust code
- Added screenshot of new Larva mono-repo file structure
- Cleaned up the unit test code to make it more readable
v3.4.0 @ CSS Camp, July 17, Barcelona
(This version would maybe more accurately be 4.0.0-beta – or at least it kinda branched from here)
- Slideshare slides for v3.4.0 at CSSCamp, 2019!
- Had to get the talk down to 30 minutes
- More oriented around the practice of CSS algorithms
- Removed Turing complete section :(
- Removed monsters and definition of PL conversation slides :(
- Added alternative definition
- Removed PMC CSS algorithm story time and added familiar code examples instead
- In Larva Algorithms section, synced up example algos with PMC algos source code
- Added back the steps for writing algorithms from v1.0.0, but they are more mature now,
- Draw an analogy to test driven development with the writing CSS algorithm steps
- Preview of what unit testing CSS algorithms might look like!
- Changed springboard cloud to stay at “technology”
v3.1.0 @ CSS Day, June 14, Amsterdam: Video here.
- Slideshare slides for v3.1.0 at CSSDay, 2019!
- Tightened up the content – needed to shave off about 7 minutes
- Moved most recent Twitter poll to after programming definition
- Remove flex-wrap / declarative logic explanation
- Removed Open-Closed rule slides
- Removed specific example of test-driven UI development and prerequisited
- Added “can of worms” metaphor for Twitter and the truth
- Removed Two Cultures and breaking down the wall slide flow
v3.0.0 @ WordCamp Montclair, June 1 2019, Montclair, New Jersey
- Given under the talk banner “CSS Is A Programming Language”, this version is all about validating CSS as a (domain-specific, declarative) programming language
- Shows some flex wrap Rust logic instead of source for cascade
- Added section diving into the “Is CSS Turing Complete?” phenomenon
- Included a code scenario to show that the thought process when writing CSS is not so different from other languages
- Discuss Single Responsibility Principle and how that relates to CSS as utility classes
- Show the same for Open-Closed principle
- Introduce an updated definition for CSS algortithm
- Show the benefit of CSS algorithms via a story from working at PMC
- Show the algorithms laboratory in Larva, PMC’s baby design system
- Conclude with some “big ideas” – tell my story of the math hating art student becoming a programmer
- Look at possible reasons for why Twitter answers “No” to the “Is CSS a PL?” question
- Identify some grand ideas about how CSS/HTML can be the thing that breaks down the barrier between The Two Cultures and gets more diversity into tech
The talk content saw a lot of changes in this version! Here are the sources or my research and learning, as well as work I mentioned in the talk:
- Tales of a Non-Unicorn: A Story About The Trouble with Job Titles and Descriptions (css-tricks.com, 2015)
- I Wrote a Post for CSS-Tricks and People Read It (notlaura.com, 2015)
- Tales of a Non-Unicorn: A Story About The Roller Coaster of Job Searching (css-tricks.com, early 2018)
I wrote a fairly extensive post about Turing completeness with regards to CSS here, and here is a CodePen showing Rule 110 encoded in CSS/HTML/Human.
- Accidentally Turing Complete, Andreas Zwinkau
- Non-Turing Complete Languages? Reddit thread
Turing Machines & Undecidability
- Happy 80th Birthday to the Turing Machine!, Stitchfix Eng. Blog
- Turing Machines Explained, Computerphile (youtube.com)
- Undecidability Tangent (History of Undecidability Part 1), Computerphile (youtube.com)
- Turing and the Halting Problem, Computerphile (youtube.com)
- Sass Elementary Cellular Automata CodePen, Miriam Nadler
- Rule 110 in HTML/CSS, Eli Fox-Epstein
- Elementary Cellular Automaton, Wolfram Math World
- Wolfram Elementary Cellular Automata, The Nature of Code
- How is the rule 110 Turing Complete? Computer Science Stack Exchange
Books about General Programming Methodologies
- Clean Code, Robert C. Martin
- Refactoring, Martin Fowler
- 99 Bottles of OOP, Sandi Metz and Katrina Owen
- The Art of Readable Code, Trevor Foucher
Specific concepts in Programming
- Programming is Writing is Programming, paper by Felienne Hermans & Marlies Aldewereld
- SOLID Design Principles Explained (stackify.com)
- Open-Closed Principle (joelabrahamsson.com)
- Single Responsibility Principle Applied to CSS (Harry Roberts in 2012!)
Miscellaneous, related to the above
- The Future of Programming, Conference talk from Robert C. Martin
- Presentation about Clean Code slides (jeremybytes.com)
Front End Methodologies
- Resources About Design Systems & FE Architecture (a compilation by me)
- Refactoring Tunnels (Harry Roberts on CSS Wizardry)
- 5 Tips for Starting a Front-end Refactor (Robin Rendle on CSS-Tricks)
General Testing Concepts
- Test Pyramid, Martin Fowler
- The Testing Pyramid, Agile in a Nutshell
- Observations on the testing culture of Test Driven Development (freecodecamp.org)
- Agile Engineering for the Web (CSS portion), James Shore
- Just Say No to More End-to-End Tests, Mike Wacker
CSS Testing Tools
- Quixote: CSS Unit & Integration Testing, James Shore
- HelpScout’s Seed Barista, testing SCSS compilation
- True: Sass Unit Tests, Oddbird
- Backstop.JS Visual Regression Testing
Anti-Human Tech Trends
Highly, highly recommend watching Ethan Marcotte’s 2019 talk World-Wide Work and reading or skimming The Two Cultures by C.P. Snow.
Bad things that are happening:
- How Technology Hijacks People’s Minds, Tristan Harris
- Use of facial recognition tech ‘dangerously irresponsible’, BBC
- How white engineers built racist code and why its dangerous for black people, The Guardian
- Gender and racial bias found in Amazon’s facial recognition technologu (again), The Verge
- Here’s how TurboTax tricks Americans into paying each year to file — even though they qualify for the fully free product, ProPublica Twitter Thread
Version 2.0, Dec. 2018
Slideshare slides for v2.0 are here!
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
Slideshare slides from v1.0.0 at CSSConf EU are here!
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)
5 responses to “CSS Algorithms: Changelog and Sources”
Nice talk 🙂
you’re amazing! Nice Talk and really opened my eyes! :D
Hi La~u~ra 😊
Thanks for sharing!
You can add a new resource to Browser Mechanics section:
“How browser rendering works — behind the scenes”
Thanks for sharing, Joan! That’s a great resource – really nice, readable description. I should read it every couple of months for a refresher.
[…] If you don’t know Lara, she’s a Design Engineer at PMC, and has an awesome talk about CSS Algorithms. Upon reading Lara’s blog, I decided I needed to speak with her, so I emailed her. A few days […]