4 ms·

This is REALLY cool stuff. There's currently a gap between CSS and JS that currently forces us to abuse HTML as an intermediary to get JS and CSS to communicate

by err4nt 11y ago

This is REALLY cool stuff. There's currently a gap between CSS and JS that currently forces us to abuse HTML as an intermediary to get JS and CSS to communicate with each other. I've been doing some experiments with closing the gap between JS and CSS from the opposite perspective of Descartes: writing JS from within CSS using a CSS-like syntax.. My take is that Descartes is the inversion of my plugin - Descartes lets you easily write CSS from JS and JS-style syntax. Either way - being able write your responsive styles all in one place (whether entirely in JS, or entirely in CSS) is a lot better than cobbling together responsive support using a bunch of custom CSS + JS carefully duct-taped together. I believe this plugin will help build modular (atomic design) elements that can be re-used on different templates/sites without much re-tooling once they're built the first time.

skewart 11y ago
Wait, I'm really curious about your plugin. Do you have a public repo somewhere? Writing JS in CSS, on the face of it, sounds, well, kinda perverse. I'm picturing something where you apply "float": "left" to a JS function, and every line where that function is called is moved to the top of its containing block. I'm joking. I actually think the idea of incorporating a simple subset of JS functionality into CSS could be super powerful. There are lots of times when you want a little JS to help with styling, or maybe even basic data fetching and binding. It would be a lot simpler to just keep it in your CSS files. I'd love to hear more about what you're working on.
- err4nt 11y ago
  The plugin, demos, examples, and more can be found at http://elementqueries.com http://elementqueries.com I've been using this for the past year and its been a life saver! Dont picture it being gross, picture it like this: http://codepen.io/tomhodgins/pen/RrEpjo http://codepen.io/tomhodgins/pen/RrEpjo This CSS gives you a sticky header, a page with a min-height of 100% - whatever the footer happens to be, and then if the page expands it just pushes the footer out of the way. Normally you would either need to know the exact height of the footer in CSS, or you would need to write a little bit of JavaScript to measure the height of the footer. But keep in mind that if youve got a lot lf content in your footer, its probably going to get very tall at phone width, medium height for tablet users, and be the shortest for desktop users. So now, how can we write CSS that is able to use this changing value of the footer height on the page? The simplest way is to allow CSS to access the measurement of that element as it has rendered on the page.
  - skewart 11y ago
    That's very cool! Nice work.
    - err4nt 11y ago
      Thanks, I just came up with a syntax that solved the problems I had with CSS and hired a brilliant JavaScript programmer, Maxime Euziere, to build me a plugin so I could use these features in my work :) If this plugin can help others too, that makes it all the more worthwhile!
devishard 11y ago
The "gap between CSS and JS" you are describing is called "decoupling" and it exists because the designers of CSS/HTML/JS have generally been experienced enough developers to know how bad of an idea it is to couple your styling and your business logic. There are two kinds of developers: ones who think this is a reasonable idea, and ones who have written UIs in languages that allow this kind of coupling and learned from their mistakes.
- LoSboccacc 11y ago
  sadly it seems the css v3 spec was written by the latter developers, with transforms violating cascading principles, pseudo elements not readable from the model and keyframe animations being a shit to control all around, so we're stuck with patchwork bridges to make it all work reasonably.
- herbst 11y ago
  Agreed. I was forced to work with JS-in-CSS and i still dont get their reasoning behind it at all. All use cases in their examples were easily solveable with CSS if you fixed up a bit of the bad CSS they shipped with. It was just a very lazy approach to handle something they lost control for.
  - err4nt 11y ago
    Can you give an example where somebody used JS inside CSS for a solution CSS alone could have provided? EDIT: I can't seem to reply down below, but in my plugin for example we've implemented a few responsive conditions: - min-scroll-x - max-scroll-x - min-scroll-y - max-scroll-y So if you needed to trigger a style (or a whole block of styles) when the page, or any element you specify has a scroll position meets the conditions above. By combining these conditions with other conditions, it makes it DEAD simple for CSS-only designers to be able to write responsive JavaScript! @element 'body' and (min-width:900px) and (min-scroll-y: 100vh) { header { position: fixed; } }
    - herbst 11y ago
      I cant simply provide a solution for your edit thats true. But i assume this to create massive overhead just to enable CSS do something it never was supposed to? It maybe just does not fit into my world view, but thats simply wrong to my eyes CSS is not supposed to know that much about the view.
deleted 11y ago
[deleted]

by err4nt 11y ago

skewart 11y ago

Wait, I'm really curious about your plugin. Do you have a public repo somewhere? Writing JS in CSS, on the face of it, sounds, well, kinda perverse. I'm picturing something where you apply "float": "left" to a JS function, and every line where that function is called is moved to the top of its containing block. I'm joking. I actually think the idea of incorporating a simple subset of JS functionality into CSS could be super powerful. There are lots of times when you want a little JS to help with styling, or maybe even basic data fetching and binding. It would be a lot simpler to just keep it in your CSS files. I'd love to hear more about what you're working on.

err4nt 11y ago
The plugin, demos, examples, and more can be found at http://elementqueries.com http://elementqueries.com I've been using this for the past year and its been a life saver! Dont picture it being gross, picture it like this: http://codepen.io/tomhodgins/pen/RrEpjo http://codepen.io/tomhodgins/pen/RrEpjo This CSS gives you a sticky header, a page with a min-height of 100% - whatever the footer happens to be, and then if the page expands it just pushes the footer out of the way. Normally you would either need to know the exact height of the footer in CSS, or you would need to write a little bit of JavaScript to measure the height of the footer. But keep in mind that if youve got a lot lf content in your footer, its probably going to get very tall at phone width, medium height for tablet users, and be the shortest for desktop users. So now, how can we write CSS that is able to use this changing value of the footer height on the page? The simplest way is to allow CSS to access the measurement of that element as it has rendered on the page.
- skewart 11y ago
  That's very cool! Nice work.
  - err4nt 11y ago
    Thanks, I just came up with a syntax that solved the problems I had with CSS and hired a brilliant JavaScript programmer, Maxime Euziere, to build me a plugin so I could use these features in my work :) If this plugin can help others too, that makes it all the more worthwhile!

devishard 11y ago

The "gap between CSS and JS" you are describing is called "decoupling" and it exists because the designers of CSS/HTML/JS have generally been experienced enough developers to know how bad of an idea it is to couple your styling and your business logic. There are two kinds of developers: ones who think this is a reasonable idea, and ones who have written UIs in languages that allow this kind of coupling and learned from their mistakes.

LoSboccacc 11y ago
sadly it seems the css v3 spec was written by the latter developers, with transforms violating cascading principles, pseudo elements not readable from the model and keyframe animations being a shit to control all around, so we're stuck with patchwork bridges to make it all work reasonably.
herbst 11y ago
Agreed. I was forced to work with JS-in-CSS and i still dont get their reasoning behind it at all. All use cases in their examples were easily solveable with CSS if you fixed up a bit of the bad CSS they shipped with. It was just a very lazy approach to handle something they lost control for.
- err4nt 11y ago
  Can you give an example where somebody used JS inside CSS for a solution CSS alone could have provided? EDIT: I can't seem to reply down below, but in my plugin for example we've implemented a few responsive conditions: - min-scroll-x - max-scroll-x - min-scroll-y - max-scroll-y So if you needed to trigger a style (or a whole block of styles) when the page, or any element you specify has a scroll position meets the conditions above. By combining these conditions with other conditions, it makes it DEAD simple for CSS-only designers to be able to write responsive JavaScript! @element 'body' and (min-width:900px) and (min-scroll-y: 100vh) { header { position: fixed; } }
  - herbst 11y ago
    I cant simply provide a solution for your edit thats true. But i assume this to create massive overhead just to enable CSS do something it never was supposed to? It maybe just does not fit into my world view, but thats simply wrong to my eyes CSS is not supposed to know that much about the view.

deleted 11y ago

[deleted]