Mastodawn

🚨 Want mixins in CSS?
Help the @csswg by telling us what feels natural to you!

Look at the code in the screenshot. What resulting widths would you find least surprising?

A: All get 100px
B: div gets 100px, div > h2 gets 200px, div + p gets 300px
C: div gets 100px, div > h2 gets 200px, div + p gets no width*
D: div and div > h2 get 100px, div + p gets no width*

* from the mixin

Poll in https://front-end.social/@leaverou/116297811172593173

Please answer based on what feels natural *to you*, it's not a quiz.

Show thread

Lea Verou, PhD 1d ago

Question in https://front-end.social/@leaverou/116297807826814028

	A (All 100px)
	B (100px, 200px, 300px)
	C (100px, 200px, nothing)
	D (100px, 100px, nothing)

Poll ends at Apr 2 at 10:23pm.

Lea Verou, PhD (@[email protected])

Attached: 1 image 🚨 Want mixins in CSS? Help the @[email protected] by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would you find least surprising? A: All get 100px B: div gets 100px, div > h2 gets 200px, div + p gets 300px C: div gets 100px, div > h2 gets 200px, div + p gets no width D: div and div > h2 get 100px, div + p gets no width Poll in https://front-end.social/@leaverou/116297811172593173 Please answer based on what feels natural to you, not what the current proposal says.

Front-End Social

Show thread

Tim Chase 1d ago

@leaverou

(now that I understand what you were asking)

C & D seem yick.

I can see justification for A & B either way. I like/voted A since there could be simple optimizations available and it's less likely to do surprising things, which I might worry about if the order switched to:

div > h2 { font-size: 20px; }
div + p { font-size: 30px; }
div { @apply --foo(10em); font-size: 10px; }

But ideally, I'd go with option E, "have the browser reach through the screen and smack the web-dev with a pool noodle" 😆

Show thread

Lea Verou, PhD

@gumnos All four options would produce the same results for the order in your toot.