5 Questions for Miriam Suzanne
I talked with Jens Oliver Meiert over at Frontend Dogma about our work here at OddBird, what’s happening in the CSS Working Group, and advice for getting started in frontend development.
A new proposal for color management in Sass
There’s been a lot of exciting work in the CSS color specifications lately, and since the new features are already starting to land in browsers, we’ve been preparing to add support in Sass as well. My proposal for that is published and ready for public feedback!
I’m very excited about the new color features starting to roll out in CSS – and similarly excited to make them available (with some extra tooling) in Sass as well. This will allow us to:
oklch
& display-p3
I hope to write more about color spaces here at some point, but for now check out the request for comments, or dive straight into the full proposal. If you want to learn more about color spaces in CSS, Bramus Van Damme has a great collection of resources, Chris Lilley & Lea Verou released the handy Color.js library, and all of this is based on CSS Color Level 4 and Level 5.
Safari is the farthest along in terms of browser support for the new color spaces, but this is all part of Interop 2022 – which means every browser is trying to get it done this year. I recommend installing the latest Safari Technology Preview and playing around with it!
I put a lot of work into this proposal, and I’m excited to get feedback. Along the way, I also went down a few rabbit holes. If you’re interested, check out The Gray Areas of HWB Color, or my Codepen experiments with Sass color inversion and interpolation of missing channels.
A workshop on resilient & maintainable CSS
New CSS features are shipping at an unprecedented rate –
cascade layers, container queries, the :has()
selector,
subgrid, nesting, and so much more.
It’s a good time to step back and understand
how these tools fit together in a declarative system –
a resilient cascade of styles.
I talked with Jens Oliver Meiert over at Frontend Dogma about our work here at OddBird, what’s happening in the CSS Working Group, and advice for getting started in frontend development.
Keep selector conflicts to a minimum
The new @scope
rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.
A new proposal for importing from NPM packages in Sass
UI libraries like Vuetify and Bootstrap make it easy to extend their themes by providing Sass source files with their NPM packages. Now, Sass is requesting feedback on a simpler way to import those libraries into your Sass styles with e.g. @use "pkg:bootstrap"
.