In early June 2022 we (Laurence and Ryan from the Design System team) visited Amsterdam for CSS Day. Despite the name this is a two-day event which, while CSS-focused, covers a variety of interesting front-end and user-centric ground.
And what a fantastic event! The venue, Zuiderkerk, is magnificent and the hospitality, professionalism and production values made for a special experience.
The stellar cast of speakers included CSS spec implementers, specialists from Google Chrome and Figma, Design System leads, W3C Technical Directors and others working at the cutting edge. There was a mix of seasoned pros alongside relative newcomers. And the audience too was very knowledgeable. This definitely felt like a conference by CSS nerds for CSS nerds!
CSS is currently moving at a startling pace. New and built-for-purpose responsive layout technologies have changed the game. Custom properties have ushered in API-like capabilities for theming components. Ideas previously written off as impossible – such as Container Queries and the parent selector – have been specified and shipped in browsers. And much of this is because we’re in a new era of collaboration between browsers.
This makes it a really exciting time to be writing CSS. Furthermore, we can influence its direction. A key takeaway from the event was just how close we as “normal developers” are to the creation of the HTML, CSS and JavaScript standards. Numerous speakers, including prolific spec-writer Tab Atkins and the CSS Working Group’s Rachel Andrew, were at pains to point out how organisations like the W3C need our feedback, issues, bug reports and pull requests on their proposals in order to shape features and specs. This access feels very empowering and only makes our job more exciting.
Our highlights
Jeremy Keith: In and out of style
Jeremy Keith kicked things off with a fascinating and thought-provoking talk, setting us up nicely for the rest of the conference. We were taken on a trip from the very early days of the web to the present day, understanding how we got here through the concepts of path dependence, agreement and a shared context. Just as was done then, we are creating the future right now with the decisions we make today.
On our trip back through the years, we were reminded of all the “hacks” we’d have to employ to achieve what can be done with pure CSS today – border radiuses, gradients, custom fonts etc. He reflected on how third-party libraries like jQuery and Sass paved the way for vanilla JS and CSS features. There is a train of thought around material honesty and how we should abstain from non-native solutions, but as we know, people are going to do it anyway. Indeed, maybe this isn’t a bad thing – hacks can push the web forward. Reflecting on how we may take this approach into FreeAgent, workarounds could be implemented if accessibility and usability are sound, with performance and maintainability being weighed against native alternatives. Jeremy suggests we get behind Open UI – an initiative aimed at providing the customisable, extensible HTML elements that so many of us want but which are not natively available.
Check out Jeremy’s presentation
Michelle Barker: Creative CSS Layout
Michelle’s talk leaned into bleeding-edge CSS such as Container Queries, the aspect-ratio property and the :has pseudo-class and how to combine these to create context-sensitive, adaptive components. But just as interesting was the audience question asking how we should communicate all these amazing capabilities to our designer colleagues. Michelle couldn’t answer it alone and it highlights that we, as an industry, must find ways to build bridges and share knowledge between designers and front-end developers. CSS (and HTML) in 2022 can do so much yet in many cases our interactions with designers remain waterfall. The modern capabilities of the web should inform our designs; our conversations and collaborations should be push and pull.
Check out Michelle’s presentation
Bramus Van Damme: The CSS Cascade, a Deep Dive
Bramus taught us everything we wanted to know about the cascade but were afraid to ask! He also introduced Cascade Layers which may just be CSS’s next game-changer. They’ll allow us to segment our styles, work with the cascade rather than against it and avoid the specificity issues that have plagued our large-scale applications.
Check out Bramus’s presentation
Marcin Wichary: I pressed ⌘B. You wouldn’t believe what happened next
Marcin’s talk isn’t one we had marked as a potential show-stealer, but it turned out to be both very insightful and seriously entertaining. Like Jeremy Keith, Marcin took us on a history lesson, this time of keyboards and typography and the complexities at the intersection of both. Different fonts, weights, naming conventions, font origins, keyboards, commands, languages, sup and sub font support… even with all this, as Marcin says, sometimes “stuff just breaks that we cannot foresee”.
Check out Marcin’s presentation
Summing up
We came away from CSS Day having had two great days and bursting with ideas. But aside from all the brilliant tips and tricks, this served as a more general reminder that the web – at its best – is inspiring, evolving, inclusive and in our hands.
Many thanks to FreeAgent for the opportunity to travel and attend. We really appreciated the change of scenery, the investment in our skills and – given the events of recent years – the chance to once again attend a first-class conference in person.
Laurence Hughes and Ryan Deegan,
Design System Team
PS: FreeAgent is hiring for a front-end developer on our Design System team. Come join us!