css-media-vars

Ah! This is brilliant. There are quite a few comments here about pitching this against other CSS frameworks or the actual use of this. This is not a stand-alone framework or anything of that type. Treat as one of your scaffold components for your styling framework. Tailwind does this with their tailwind.config.js and is more of raw CSS design tokens. I just wish their commercial TailWindUI[1] make it easy to make use of it the better way. I wish I saw Pollen a few months ago. I wanted to do an effortless design for my personal website and stick to as plain vanilla CSS as possible. The best way was to rely on CSS-Variables. I did do it from scratch[2]. It works though it is pretty hacky, and I'm not too concerned. Right now, I can swap few values and have an entirely different color scheme - light/dark version of my own, Nord Theme[3], and

That's just a hack using css custom properties that still requires a global css file to define all breakpoints on the html element. Also, how does it work for pseudo elements, state selectors etc. ? I can just see examples for media queries. In my opinion it's also not really nice to read, just look at the example on his github page https://github.com/propjockey/css-media-vars. Do you really think this is easier to read than normal media queries ?

Preach! I wholeheartedly agree. The CSS file is in the repo: https://github.com/propjockey/css-media-vars/blob/master/css... and the readme links to this in an example link tag: https://unpkg.com/css-media-vars/css-media-vars.css NPM is for convenience. Can't expect people to jump out of the build env all at once, so providing a vanilla CSS solution as a package is a good way to start the transition. IMO /shrug

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 kind