5 ms·

I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but C

I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on. But what about when the transition takes effect? JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. If you do properties too quickly the transition won't happen. Such as if a user clicks on the bar to change the position, I have to hack in a 100ms setTimeout to set the new transition duration after stopping the transition with transition:none; Why can't I control a transitions location? Chrome's animation viewer can go back and forth in time easily. Why isn't interactivity seperate from CSS? CSS elements cannot effect those outside of its scope. You require JS for just dumb simple things that should be natively supportable. For instance you can make CSS do things based upon URL hash names like #somename, but you can't set them in CSS. You can't change attributes on elements, or classes or anything like that. I think we've gotten to the point where JS is the 'programming language' of a webpage that has intentions far beyond rendering and interactivity. Perhaps we need a newer kind of CSS that's made for dynamic interactions. That way great UI's can be built in a safer css-like environment.

_hardwaregeek 8y ago
Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need something to unify CSS and HTML and JS into a UI builder that doesn't make you want to tear your hair out when you have to center a div over another div and give it an animation.
- VonGuard 8y ago
  The thing i hate about CSS is how unstructured it can be. You just sorta list whatever you want and it's suddenly a style sheet. No headers, no footers, no must includes.... DO I use quotes around this value? Do I not? Does white space matter? It's the most intimidating language I've ever used just because it feels so open and uncontrolled and nonsensical... I always thought CSS was some leftover abomination from the days of Netscape.
  - devwastaken 8y ago
    LESS is more how CSS should look like for styling. It's amazing we don't have embedding of rules yet. parent { child { } } is just so much more development friendly than parent { } parent child { }
    - bsheir74 8y ago
      Agreed, and hoping that scss or less influences future versions of css!
    - mjevans 8y ago
      I believe the why is that as soon as you have any invalid syntax everything else is ignored. I forget the level of scope, I think it's until the next complete rule?
    - gsnedders 8y ago
      The CSS WG earlier this year resolved to take on a spec defining this, and there's implementer interest, so it's highly likely to happen. (This is https://github.com/w3c/csswg-drafts/issues/2701 https://github.com/w3c/csswg-drafts/issues/2701 .)
  - _hardwaregeek 8y ago
    Plus the error handling is abysmal.
  - scns 8y ago
    with PostCSS and the postcss-nested you can nest loads of stuff like mediaqueries, which makes it bearable IMHO.
- combatentropy 8y ago
  > Try setting a child of a flexbox container to 100% height. Isn't this the default? align-items: stretch --- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ > The days of needing separate constructs because of bandwidth are over That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet. This was when each web page was a static HTML file. Few websites used programming languages to render pages. So the benefit today is less. But I guess if you don't care about that nor bandwidth then you can use inline style attributes.
  - _hardwaregeek 8y ago
    https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent https://stackoverflow.com/questions/33636796/chrome-safari-n... I'm referring to this. Got bitten by it recently. > That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet. This was when each web page was a static HTML file. Few websites used programming languages to render pages. So the benefit today is less. Interesting, I didn't know that. Still, CSS doesn't make a whole lot of sense to me. Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it!
    - irrational 8y ago
      >Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it! Well, there's your problem. I'd recommend reading about things like atomic css, BEM, OMACSS, etc.
      - _hardwaregeek 8y ago
        That's why I use CSS in JS :D. But we're just putting abstractions/stopgaps over a fundamentally flawed design. Not to mention, since everybody uses a different standard for isolation, CSS in JS is not compatible with BEM is not compatible with SASS, etc.
pcmaffey 8y ago
Yes, this is all right on. And it's being solved in modern component libraries that combine JS, HTML, and CSS into modular building blocks for UI's. The key difference IMO in how to think about CSS nowadays is to move away from the paradigm of CSS as a global system, and instead, use it locally scoped to components. I like to think of CSS classes as a kind of local state. Most often, in layout components and whatnot, its static. Otherwise, in more dynamic situations, rather than messing with css properties directly (or passing vars via css-in-js), the component's js manages the "state" of the classes being applied by adding/removing. When you start to think in this composable component framework, styles are just another component. And js is used to manage changes in state, which it is much more apt to do.
dao- 8y ago
Off the top of my head, there are transition events, requestAnimationFrame, and most importantly the Web Animations API. So what you're saying seems to be false.
archergod 8y ago
even HTML cannot communicate with JS, you are talking about collective Web page behaviour running in JS/CSS/HTML/Browser. CSS is standalone, it doesn't have logical brain. It don't think. That is part of JS. I don't agree with your idea, if we add logic to all HTML and CSS then it is like batman doing killing.
XCabbage 8y ago
> But what about when the transition takes effect? JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. If you do properties too quickly the transition won't happen. Such as if a user clicks on the bar to change the position, I have to hack in a 100ms setTimeout to set the new transition duration after stopping the transition with transition:none; There's a slightly more reliable and less ugly hack than using a timeout, which I _think_ is applicable to the scenario you're describing: instead, force a reflow by reading the element's .offsetHeight. I wrote about this on Stack Overflow years ago: https://stackoverflow.com/a/16575811/1709587 https://stackoverflow.com/a/16575811/1709587 Not disagreeing with the overall thesis of this post, just pointing out a slightly less annoying way to work around the problems from application-developer-land.
iaml 8y ago
>JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. It's not easy, but it's possible. All animated/transioned elements emit lifecycle events like animationstart/transitionstart so you can use those to orchestrate complex animations. This is AFAIK how ng-animate works internally.
krapp 8y ago
>The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Am I the only person who thinks this is a feature, and that the "bad part" is CSS supporting animations and transitions? I mean - HTML for markup, CSS for layout and colors, JS for logic and animation. There was a very clear and well defined separation of concerns to the web, why did we have to go and ruin it by making CSS almost Turing complete then having everyone generate CSS and HTML with javascript?

_hardwaregeek 8y ago

Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need something to unify CSS and HTML and JS into a UI builder that doesn't make you want to tear your hair out when you have to center a div over another div and give it an animation.

VonGuard 8y ago
The thing i hate about CSS is how unstructured it can be. You just sorta list whatever you want and it's suddenly a style sheet. No headers, no footers, no must includes.... DO I use quotes around this value? Do I not? Does white space matter? It's the most intimidating language I've ever used just because it feels so open and uncontrolled and nonsensical... I always thought CSS was some leftover abomination from the days of Netscape.
- devwastaken 8y ago
  LESS is more how CSS should look like for styling. It's amazing we don't have embedding of rules yet. parent { child { } } is just so much more development friendly than parent { } parent child { }
  - bsheir74 8y ago
    Agreed, and hoping that scss or less influences future versions of css!
  - mjevans 8y ago
    I believe the why is that as soon as you have any invalid syntax everything else is ignored. I forget the level of scope, I think it's until the next complete rule?
  - gsnedders 8y ago
    The CSS WG earlier this year resolved to take on a spec defining this, and there's implementer interest, so it's highly likely to happen. (This is https://github.com/w3c/csswg-drafts/issues/2701 https://github.com/w3c/csswg-drafts/issues/2701 .)
- _hardwaregeek 8y ago
  Plus the error handling is abysmal.
- scns 8y ago
  with PostCSS and the postcss-nested you can nest loads of stuff like mediaqueries, which makes it bearable IMHO.
combatentropy 8y ago
> Try setting a child of a flexbox container to 100% height. Isn't this the default? align-items: stretch --- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ > The days of needing separate constructs because of bandwidth are over That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet. This was when each web page was a static HTML file. Few websites used programming languages to render pages. So the benefit today is less. But I guess if you don't care about that nor bandwidth then you can use inline style attributes.
- _hardwaregeek 8y ago
  https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent https://stackoverflow.com/questions/33636796/chrome-safari-n... I'm referring to this. Got bitten by it recently. > That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet. This was when each web page was a static HTML file. Few websites used programming languages to render pages. So the benefit today is less. Interesting, I didn't know that. Still, CSS doesn't make a whole lot of sense to me. Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it!
  - irrational 8y ago
    >Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it! Well, there's your problem. I'd recommend reading about things like atomic css, BEM, OMACSS, etc.
    - _hardwaregeek 8y ago
      That's why I use CSS in JS :D. But we're just putting abstractions/stopgaps over a fundamentally flawed design. Not to mention, since everybody uses a different standard for isolation, CSS in JS is not compatible with BEM is not compatible with SASS, etc.

pcmaffey 8y ago

Yes, this is all right on. And it's being solved in modern component libraries that combine JS, HTML, and CSS into modular building blocks for UI's. The key difference IMO in how to think about CSS nowadays is to move away from the paradigm of CSS as a global system, and instead, use it locally scoped to components. I like to think of CSS classes as a kind of local state. Most often, in layout components and whatnot, its static. Otherwise, in more dynamic situations, rather than messing with css properties directly (or passing vars via css-in-js), the component's js manages the "state" of the classes being applied by adding/removing. When you start to think in this composable component framework, styles are just another component. And js is used to manage changes in state, which it is much more apt to do.

dao- 8y ago

Off the top of my head, there are transition events, requestAnimationFrame, and most importantly the Web Animations API. So what you're saying seems to be false.

archergod 8y ago

even HTML cannot communicate with JS, you are talking about collective Web page behaviour running in JS/CSS/HTML/Browser. CSS is standalone, it doesn't have logical brain. It don't think. That is part of JS. I don't agree with your idea, if we add logic to all HTML and CSS then it is like batman doing killing.

XCabbage 8y ago

> But what about when the transition takes effect? JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. If you do properties too quickly the transition won't happen. Such as if a user clicks on the bar to change the position, I have to hack in a 100ms setTimeout to set the new transition duration after stopping the transition with transition:none; There's a slightly more reliable and less ugly hack than using a timeout, which I _think_ is applicable to the scenario you're describing: instead, force a reflow by reading the element's .offsetHeight. I wrote about this on Stack Overflow years ago: https://stackoverflow.com/a/16575811/1709587 https://stackoverflow.com/a/16575811/1709587 Not disagreeing with the overall thesis of this post, just pointing out a slightly less annoying way to work around the problems from application-developer-land.

iaml 8y ago

>JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. It's not easy, but it's possible. All animated/transioned elements emit lifecycle events like animationstart/transitionstart so you can use those to orchestrate complex animations. This is AFAIK how ng-animate works internally.

krapp 8y ago

>The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Am I the only person who thinks this is a feature, and that the "bad part" is CSS supporting animations and transitions? I mean - HTML for markup, CSS for layout and colors, JS for logic and animation. There was a very clear and well defined separation of concerns to the web, why did we have to go and ruin it by making CSS almost Turing complete then having everyone generate CSS and HTML with javascript?