4 ms·

>What is the alternative to CSS then? The alternative is inline styles. ... The idea is you apply styles to elements through JavaScript. But if you have a non-

by jasode 11y ago

>What is the alternative to CSS then? The alternative is inline styles. ... The idea is you apply styles to elements through JavaScript. But if you have a non-trivial app with thousands of elements across hundreds of pages, people will inevitably want to "tame", "organize", "consolidate", etc those inline styles into some coherent taxonomy to enforce consistency. Wherever and however the programmers decide to store this "consistency taxonomy" (e.g. into special .json files instead of .css files), they've just reinvented "CSS" by another name. The 3 complaint bullet points at the top of the essay would then apply to the adhoc-this-is-not-CSS-but-it-acts-like-CSS system.

muzmath 11y ago
There's still some key differences between what this new JSON declared and Javascript distributed stylesheets would work. Mainly is that there is no more CSS Selector madness. You no longer need to have concepts such as selector specificity, nor the entire syntax around grabbing the correct selectors. Also you could then be able to logically follow the flow using traditional debugging methods rather than this mess which we have for debugging CSS currently. Lastly this removes the need for a lot of the additional syntax introduced into CSS for animations/transitions (though I have no idea what the performance would be inbetween these two methods). To be fair I haven't actually implemented this form of styling yet but it's something that interests me and I'd be interested in any potential downfalls before I commit to it on a project.
- TimJYoung 11y ago
  Here's an example of a JS application that dynamically animates DOM properties using requestAnimationFrame: http://www.elevatesoft.com:8081/panels/panels.html http://www.elevatesoft.com:8081/panels/panels.html It's a little slow on mobile, but pretty good on desktops, and could probably use some optimizations. The DOM transitions are animated at the of end of each change management cycle for a given UI element. That allows for layout management that occurs independently of what is going on in the DOM, treating the DOM updates as only a "controlled repaint".
  - exodust 11y ago
    That's pretty cool. Performance on mobile is of course important, but perhaps it can be improved. I like CSS, but I also like having other options and ideas available. As others have said, for special one page web apps, the scripted layout might be a good choice. And then we have CSS grids coming soon too. Choice is good!
    - TimJYoung 11y ago
      Mobile is a tough nut to crack, due to some hard constraints on the CPU/power consumption, but it's getting better. A new iPhone 5s does a pretty good job with something like that app I linked to, whereas an older Samsung Galaxy Tab 2 does not. A lot also depends upon the browser, since there is a big difference between the JS engines in Chrome (best, by far) and FF/IE when it comes to things like requestAnimationFrame() execution performance. The linked-to example is a dog when run on IE 11/Windows 8 on a practically-new Dell laptop/tablet convertible with an i3, but works nicely in Chrome on the same device. Re: CSS grids - totally agree. But, what I've learned over the last 4 years of developing a web application IDE is this: CSS is great if you want to set the layout and leave it alone (for the most part). In other words, when the JS is decorative, things are great. When the JS becomes the primary actor, things start to break down due to lack of control over how/when the reflows/repaints occur.
- cm2187 11y ago
  Well, one potential downfall is that a lot of people like me browse the web without javascript enabled. When we arrive on a page which is unviewable without scripts, unless it is something we are really keen on accessing we just browse away.
ufo 11y ago
Alternatively, people could organize things using theri programming language of choice in the serverside, when they generate the HTML. No need to force an universal standard on everyone.
TimJYoung 11y ago
That's what our product, Elevate Web Builder, does. It uses special JSON control interface files to describe the element styling: http://www.elevatesoft.com/manual?action=viewtopic&id=ewb2&topic=Control_Interfaces http://www.elevatesoft.com/manual?action=viewtopic&id=ewb2&t... The benefit of using JSON is that a JS compiler can include it in the HTML loader for the JavaScript application, minimizing any more round-trips to the web server, and can treat the JSON as a "resource" that can be manipulated in an easier fashion than CSS at runtime. Furthermore, the JSON can be compressed/uncompressed using identifier compression, making it tiny compared to CSS. CSS is perfect for web sites that primarily use static/dynamic HTML organized as pages. It's a bad fit for single-page JS applications that act more like traditional desktop/mobile applications.

by jasode 11y ago

muzmath 11y ago

There's still some key differences between what this new JSON declared and Javascript distributed stylesheets would work. Mainly is that there is no more CSS Selector madness. You no longer need to have concepts such as selector specificity, nor the entire syntax around grabbing the correct selectors. Also you could then be able to logically follow the flow using traditional debugging methods rather than this mess which we have for debugging CSS currently. Lastly this removes the need for a lot of the additional syntax introduced into CSS for animations/transitions (though I have no idea what the performance would be inbetween these two methods). To be fair I haven't actually implemented this form of styling yet but it's something that interests me and I'd be interested in any potential downfalls before I commit to it on a project.

TimJYoung 11y ago
Here's an example of a JS application that dynamically animates DOM properties using requestAnimationFrame: http://www.elevatesoft.com:8081/panels/panels.html http://www.elevatesoft.com:8081/panels/panels.html It's a little slow on mobile, but pretty good on desktops, and could probably use some optimizations. The DOM transitions are animated at the of end of each change management cycle for a given UI element. That allows for layout management that occurs independently of what is going on in the DOM, treating the DOM updates as only a "controlled repaint".
- exodust 11y ago
  That's pretty cool. Performance on mobile is of course important, but perhaps it can be improved. I like CSS, but I also like having other options and ideas available. As others have said, for special one page web apps, the scripted layout might be a good choice. And then we have CSS grids coming soon too. Choice is good!
  - TimJYoung 11y ago
    Mobile is a tough nut to crack, due to some hard constraints on the CPU/power consumption, but it's getting better. A new iPhone 5s does a pretty good job with something like that app I linked to, whereas an older Samsung Galaxy Tab 2 does not. A lot also depends upon the browser, since there is a big difference between the JS engines in Chrome (best, by far) and FF/IE when it comes to things like requestAnimationFrame() execution performance. The linked-to example is a dog when run on IE 11/Windows 8 on a practically-new Dell laptop/tablet convertible with an i3, but works nicely in Chrome on the same device. Re: CSS grids - totally agree. But, what I've learned over the last 4 years of developing a web application IDE is this: CSS is great if you want to set the layout and leave it alone (for the most part). In other words, when the JS is decorative, things are great. When the JS becomes the primary actor, things start to break down due to lack of control over how/when the reflows/repaints occur.
cm2187 11y ago
Well, one potential downfall is that a lot of people like me browse the web without javascript enabled. When we arrive on a page which is unviewable without scripts, unless it is something we are really keen on accessing we just browse away.

ufo 11y ago

Alternatively, people could organize things using theri programming language of choice in the serverside, when they generate the HTML. No need to force an universal standard on everyone.

TimJYoung 11y ago

That's what our product, Elevate Web Builder, does. It uses special JSON control interface files to describe the element styling: http://www.elevatesoft.com/manual?action=viewtopic&id=ewb2&topic=Control_Interfaces http://www.elevatesoft.com/manual?action=viewtopic&id=ewb2&t... The benefit of using JSON is that a JS compiler can include it in the HTML loader for the JavaScript application, minimizing any more round-trips to the web server, and can treat the JSON as a "resource" that can be manipulated in an easier fashion than CSS at runtime. Furthermore, the JSON can be compressed/uncompressed using identifier compression, making it tiny compared to CSS. CSS is perfect for web sites that primarily use static/dynamic HTML organized as pages. It's a bad fit for single-page JS applications that act more like traditional desktop/mobile applications.