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 Mar 26

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

A (All 100px)

28.5%

B (100px, 200px, 300px)

69.6%

C (100px, 200px, nothing)

D (100px, 100px, nothing)

1.9%

Poll ended 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

ziadkh0

@leaverou I voted A, because —arg is defined as type <length>. I would vote B for untyped —arg.
Because this what @-function does and I would expect @-mixin to work the same way, in terms of resolving em to px or not.

Example (only work in Chrome): https://codepen.io/ziadkh0/pen/WbGdWdb

@function typed vs untyped

...