from Hacker News

Show HN: A completely different way to write responsive, vanilla, CSS

by JaneOri on 7/17/20, 1:14 AM with 45 comments

by James0x57 on 7/17/20, 1:14 AM
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 rely on JS or any sort of build step, and if you're already used to seeing --css-variables it's easier to read/maintain too.
I've created a couple JS Bins if you want to play around with it a bit, resize the "output" pane to see it update:
Minimal example: https://jsbin.com/giqedowale/edit?css,output
More involved example: https://jsbin.com/yicuqujehe/1/edit?html,css,output
If you're familiar with CSS, it may seem like it's impossible for this to work without scripts, but while working on another project I realized in the CSS Spec for custom properties that combining a few small details they've highlighted, in a specific order, it makes it possible to do all kinds of things that have never been possible before in CSS. This is the first project I've released using the idea.
Anyway, it's totally free and open source too so hack away if you'd like! https://github.com/propjockey/css-media-vars
I'll probably be refreshing this page for a while, so I'm happy to answer any questions or dive into the CSS Spec with you and talk about the tech if you're curious!
by Rotten194 on 7/17/20, 3:54 AM
So I think I understand how this works? Correct me if I'm wrong...
So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output
We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS).
The "false" value for the toggle is "initial", so at the top I set:
```
    div {
      --is-hovered: initial;
      --is-special: initial;
    }
```
The first trick is that assigning a variable value as a single space token is valid according to spec (https://www.w3.org/TR/css-variables-1/#syntax), making the var(...) usage substitute a single space. So if our variable should be "true", we use whatever method to set it to a single space:
```
    div:hover {
      --is-hovered: ;
    }
    
    div.special {
      --is-special: ;
    }
```
The second trick is that an invalid property value will fall back to the second argument of the `var()` function. So we first create a property that only has a valid value if the flag is true (a single space):
```
    --hover-opacity: var(--is-hovered) 1.0;
```
If the div is hovered, `--is-hovered` is a single space, so the property value becomes:
```
    --hover-opacity:  1.0; // note two spaces
```
If the div isn't hovered, `--is-hovered` is `initial`, so the property value becomes:
```
    --hover-opacity: initial 1.0;
```
Which is invalid CSS!
We can then interpret this in our final opacity property:
```
    --regular-opacity: 0.5;
    --opacity: var(--hover-opacity, var(--regular-opacity));
```
If the div is hovered, the first argument is evaluated to:
```
    --opacity: var( 1.0, var(--regular-opacity));
```
And since that's valid syntax, the second argument is short-circuited (ignored). However, if the div isn't hovered, then the opacity property is computed as:
```
    --opacity: var(initial 1.0, var(--regular-opacity));
```
The first argument is invalid! So the property falls back to the second argument, and we get `var(--regular-opacity)`.
by cosmotic on 7/17/20, 2:08 AM
When I clicked to see vanilla CSS, an NPM package was not something I expected to see.
by LukeBMM on 7/17/20, 2:58 PM
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 maintainability are nightmarish.
by delgaudm on 7/17/20, 3:52 AM
Interestingly this site is almost completely unreadable[0] on Android Chrome
[0]http://imgur.com/gallery/5LZ6leC
by 9935c101ab17a66 on 7/17/20, 7:07 AM
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 really new, and they will come in time). - Guidance on best practices for variable naming (when an element has multiple responsive properties). I just ended up doing `--sm-property-name` for each variable.
Are you looking for contributors? I intend to use this approach for a project over the next few days, and I could help with the documentation.
by russdpale on 7/17/20, 8:13 PM
This is awesome, build steps in CSS are absurd if you really sit there and think about what the purpose of the browser is compared to what it used to be..
No build step should be the future of web development. The more steps that are added that require yet more tools to learn and more dependencies to maintain, the less inclusive and creative the web becomes. Hopefully we will one day be able to look back on this time period as an evil necessity.. I mean writing es6 and building to es5 is way better a lot of the time from a development perspective but on the face of it, its absurd and its why tooling gives people fatigue and turns away new promising developers for better programming languages.
I would definitely provide a way to download the css without npm first. Like big worm said, its about principalities.
by satvikpendem on 7/17/20, 6:03 AM
Making CSS Turing complete, nice. Now we can run entire websites with functionality even if we turn JS off. Maybe we'll even see CSS only programming frameworks.
by tmpfs on 7/17/20, 4:55 AM
This 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 CSS preprocessors is over, they add very little value now we can use variables and combined with tricks like these we can speed up our builds!
by sm4sh on 7/17/20, 4:44 AM
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.
by ketzo on 7/17/20, 3:20 AM
I quite like this. It’s a small idea that tooootally changes the way responsive stuff gets written. I’m gonna try this out on my next project.
by captn3m0 on 7/17/20, 9:52 AM
Suggestion: provide a plain text version of the combined media queries to help the reader understand.
by PudgePacket on 7/17/20, 3:36 AM
Damn.. super interesting!
by deltron3030 on 7/17/20, 5:01 AM
This breakpointless approach is interesting:
https://utopia.fyi/