I touch most of CSS, along with some JS, HTML, etc.
Feel free to ask me about anything; if I don't know, I'll probably know where to send you.
Or, both a return to the old days, and a refreshing blast of new ideas.
A whirlwind, not a deep dive.
Again, https://www.xanthir.com/talks/2022-06-10 to follow along.
a:visited, button, .foo
.sidebar button, button.selected
#top#top.product-page .sidebar .button__selected
color: red !important;
But we're better now! (And we'll keep getting better!)
button, a, .foo
Nested <style> is fast and efficient If not individually modified, automatically shared.
new CSSStyleSheet(...) lets you ship your CSS in your JS,
only parse once.
import sheet from './style.css' assert {type:'css'} works too!
Encapsulation is a double-edged sword.
Protection from accidental over-styling is also protection from intentional styling.
Several solutions!
You know them, you (hopefully) love them.
The attack deals
Styling with variables is possible, but unwieldy when what you want is to allow arbitrary styling.
Every possible property you might want to change needs to be given its own variable; CSS has 400+ properties!
Want :hover styles? Make another set of --*_hover variables!
https://drafts.csswg.org/css-shadow-parts/
Advertise some elements as "parts", visible outside of the component.
Target those parts with ::part()
The attack deals
Still doesn't work well with React (but does with most other frameworks).
Encapsulation means encapsulation; more difficult in some ways.
https://drafts.csswg.org/css-cascade-6/#scoped-styles
Limits styles to a "donut"
Making nesting + specificity more intuitive
Didn't that last bit look (and act) sorta like Sass nesting, only a little bad?
What're you trying to pull?
(This is you talking, not me.)
https://drafts.csswg.org/css-nesting/
Nesting (almost) as good as Sass!
color property with a var()?
Or <color> type selector,
with a :var() pseudo-class?
Can't tell until you hit the ;!
Feedback welcome at CSSWG Issue 4748