dotCSS 2019
who it's for
frontend developers, UI engineers, design system engineers, web performance engineers, accessibility engineers, frontend QA engineers
topics
utility-first CSS workflows; CSS-in-JS component patterns; state machines with data-state; CSS testing with SASS snapshots; variable fonts and optical-size; SVG <use> reuse and masking; inline custom properties API; JS-like logic via CSS variables; critical inline CSS and stylesheet splitting; :focus-visible and outline techniques; progressive enhancement and feature queries
| title | author | length |
|---|---|---|
| In Defense of Utility-First CSS | Sarah Dayan | 18m |
Argues that switching to utility-first CSS—atomic classes tied to a style guide, composed in HTML—lets a growing site change without brittle selectors, and… | ||
| What breaking interfaces taught me about building better interfaces | Hakim El Hattab | 18m |
Hakim tries to give people tools for finding unexpected ways to improve UI elements. He talks about how reinventing the wheel is a great way to learn and… | ||
| Writing CSS in the year 3019 | Ire Aderinokun | 15m |
Claims that even a century from now CSS still relies on progressive enhancement and concrete fallbacks: feature queries for grouped capabilities, logical… | ||
| Crafting Stateful Styles | David Khourshid | 18m |
Argues that styling belongs to explicit finite state machines rather than scattered classes, using data-state attribute + data-transition to guarantee a single… | ||
| CSS, Design Systems & Developer Experience | Emily Plummer | 16m |
Claims that a design system can make CSS scalable and performant get tested with concrete choices: GitHub moves from many utility class names to a React… | ||
| SVG & CSS | Jérémie Patonnier | 04m |
Shows concrete techniques: SVG <use> reuse and masking to reshape a rect to build flowers, a teapot and other forms purely by CSS-styled SVG. Demonstrates… | ||
| CSS tests | Fabien Zibi | 04m |
Claims that every line of CSS can be tested by turning SASS into CSS and asserting outputs, with concrete examples: using sass.renderSync to get generated CSS… | ||
| Utility of Inline Styles | Roman Komarov | 05m |
Claim: inline custom properties become an HTML-to-CSS API, letting pages set values in style attributes and have stylesheet logic apply them via attribute… | ||
| JS in CSS | Jean-francois Garreau | 05m |
Claims that running JavaScript-like logic inside CSS is possible by abusing CSS custom properties and string values, and demonstrates a working random color… | ||
| Dynamic Typographic Systems with Variable Fonts | Jason Pamental | 20m |
Explains how variable fonts let one file act as many and pair with CSS custom properties and calculations to create scalable, componentized typography… | ||
| On the origin of cascades | Hidde de Vries | 20m |
A concise genealogy: CSS originates from a 1990s proposal that introduces the weight of influence (a weird 30/70 style idea) and early inheritance, and it wins… | ||
| The double faces of CSS | Aurélien Levy | 16m |
Covers concrete pitfalls and fixes: how default outlines get stripped by resets and leave keyboard users blocked, recommends using :focus-visible and tuned… | ||
| nothing matches | ||