css-media-vars
Dev tools
css responsive breakpoints
SHOW HN2020
248points
45comments
#191of 3,028 in 2020
Top 7%of 2020 by points
How HN took it
MixedNo clear lean
11 positive, 17 neutral or asking, 3 mixed, 6 critical, out of 37 comments about the project. Thread score +0.15.
Idea: 10 for, 0 againstDesign: 0 for, 3 againstDocs: 1 for, 1 againstExecution: 0 for, 2 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Clever use of custom property spec behavior, no JS needed
From 3 comments
I know the docs need a little love but I think this has potential to be a game changer for writing responsive CSS. It has named breakpoints, lets you write DRY selectors, doesn't…
James0x57 on HNYEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional logic is…
James0x57 on HNThis is really smart, good job. I look forward to taking this for a spin, the point of not adding a build step is critical for some of my current work. I think the time for using…
tmpfs on HN
Single definition per property is cleaner than per-breakpoint repetition
From 1 comment
What makes this one different is that, for example, if you want to set the width, you just do it once. Other approaches (including bootstrap) you have to type "width" once for…
esperent on HN
Objections
Hard to read and maintain; feels like a hack
From 2 comments
This a profoundly creative and clever idea which I hope to never see in any actual use, ever. I really appreciate the ingenuity, but I can't help but feel its legibility and…
LukeBMM on HNdear god, how did we get here (Neat trick I'm just weary of web languages that in practice feel like they're working against clarity)
rkagerer on HN
Browser support excludes IE11 and the docs' support claim is misleading
From 2 comments
The upsell on browser support is a little misleading. Sure, it’s 94% worldwide supported..but what isn’t mentioned is that the 6% is entirely IE11 and down and that the browser…
agloeregrets on HNIE11 and down is 1.73%, not all 6%. The rest is mostly old versions of popular browsers but tiny browsers like the Chinese QQ Browser are also included at the link provided.…
James0x57 on HN
Npm package used for a vanilla CSS project is unexpected
From 2 comments
When I clicked to see vanilla CSS, an NPM package was not something I expected to see.
cosmotic on HNSeems like it's just being used as a distribution method here.
PudgePacket on HN
Requests
More documentation and examples
From 2 comments
This is really cool. As I was writing some media queries today, I was yearning for a simpler solution. Couple of nice-to-haves: - More examples (though I'm guessing this is…
9935c101ab17a66 on HNSuggestion: provide a plain text version of the combined media queries to help the reader understand.
captn3m0 on HN
Simpler syntax for combining conditions such as AND and OR
From 2 comments
congrats, i think this is a very good idea. the AND and OR logic syntax a little clunky to me. i'd love something more first class from the CSSWG in accommodating this.
swyx on HNFor vanilla css-writer it could be a game changer, but who writes vanilla css in 2020? SASS make it so easy to write complex css simple. css-media-vars would be a game changer…
progx on HN
Questions
Why the keyword initial is used instead of other strings
From 3 comments
Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?
tobr on HNI was playing around with this here: https://jsbin.com/zebipenidi/1/edit and tried editing the keyword to other things. When I tried other strings (my name, "null", other CSS…
uxamanda on HNThe OP tweet this about it [0], which links to the CSS spec [1]. It seems like a variable defined as initial triggers a different behavior than a traditional "syntax" error. [0]…
uxamanda on HN
Alternatives named
Bootstrap breakpoints
From 1 comment
Am I not getting this or is this just a slightly different way of using breakpoints like bootstrap some years ago? I think we've come full circle.
sm4sh on HN
Utopia fluid type and space scale
From 1 comment
This breakpointless approach is interesting: https://utopia.fyi/
deltron3030 on HN
Sass preprocessors
From 2 comments
For vanilla css-writer it could be a game changer, but who writes vanilla css in 2020? SASS make it so easy to write complex css simple. css-media-vars would be a game changer…
progx on HNThis is really smart, good job. I look forward to taking this for a spin, the point of not adding a build step is critical for some of my current work. I think the time for using…
tmpfs on HN