Ask Me Anything

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.

Keeping Your CSS Small

Or, both a return to the old days, and a refreshing blast of new ideas.

A whirlwind, not a deep dive.

Again, to follow along.

Back in the Day

A Lot Of Solutions...

But we're better now! (And we'll keep getting better!)

Shadow DOM

Setting It Up

The attack deals 2d8+2 damage.

How Do We Style?

Nested <style> is fast and efficient If not individually modified, automatically shared.

How Do We Style?

new CSSStyleSheet(...) lets you ship your CSS in your JS, only parse once.

import sheet from './style.css' assert {type:'css'} works too!

How Do We Style From The Outside?

Encapsulation is a double-edged sword.

Protection from accidental over-styling is also protection from intentional styling.

Several solutions!

CSS Variables

You know them, you (hopefully) love them.

The attack deals 1d4 damage.

Registering Variables

Free default, inheritance control, animation support, DevTools integration!

But I Need More

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!

::part() Is The Solution

Advertise some elements as "parts", visible outside of the component.

Target those parts with ::part()

The attack deals 1d4 damage.

::part() Hides Implementations

exportparts="" Unhides Implementations

Shadow DOM Isn't Perfect

Still doesn't work well with React (but does with most other frameworks).

Encapsulation means encapsulation; more difficult in some ways.


Limits styles to a "donut"

Making nesting + specificity more intuitive

Do Not Exceed The Donut

Do Not Exceed The Donut

Selecting Relative To The Root

Nesting Doesn't Work

What color am I?

@scope Nesting Does Work

I'm dark blue!

A New Cascade Category

Caveats and Questions


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.)

CSS Nesting

Nesting (almost) as good as Sass!

Yeah Basically Like Sass

Or With @nest

CSS Parsing Is Complex

color property with a var()?

Or <color> type selector, with a :var() pseudo-class?

Can't tell until you hit the ;!

Only Blocker Left

Feedback welcome at CSSWG Issue 4748

The End