4 ms·

Oh stop bashing on CSS in JS already. It's not CSS in JS, it's CSS in component files which are -- surprise surprise -- VIEW FILES. I see nothing wrong with hav

Oh stop bashing on CSS in JS already. It's not CSS in JS, it's CSS in component files which are -- surprise surprise -- VIEW FILES. I see nothing wrong with having dimensional and visual definitions in view files, their whole point of existence is to serve as such. You are trying to solve a problem that doesn't exist.

vlunkr 9y ago
I don't think you've contested any of the authors arguements here. They argue that inline styles are difficult to maintain and refactor, because of the tendency to copy-paste. Also to implement hover or other styles, you have to go back to CSS or use JS which is much worse. Also, it's not CSS, it's inline styles, and you lose the cascading advantage. Say I want every anchor tag on my site to be the same color, without CSS I have to go stick that style on every one individually. Realistically you would make it component, but it's a component that wouldn't need to exist with just one line of CSS. I'm sure it's possible to write in this way correctly, but every time I've seen it it's been awful. But that probably has more to do with the fact that the devs writing it really didn't care much to write clean styles. I'm not saying CSS is definitively better, that's just my opinion. But if you are going to advocate inline styles you have to know the trade offs and be able to justify them.
- k__ 9y ago
  The copy-paste problem is true. But on the other hand, I often end up with a few "primitive" base components that use CSS-in-JS and reuse these components. So I have a few components with "inline" styles and the rest uses these components. For a refactor I simply have to change these components.
- onion-soup 9y ago
  >you lose the cascading advantage What? Components and cascading? Only inline styles make sense if we are talking components. Each component must be self-contained, pure and predictive. Why the hell do we want 90s technology again?
  - Pxtl 9y ago
    This. You can have global styling, or you can have properly-encapsulated components. The more you try to have it both ways, the more they step on each other's toes. And for me personally, at least for heavy-duty web applications, modular components are far more useful.
  - talmand 9y ago
    You can do component-based, self-contained CSS without inline styles. I would recommend you not use inline styles when it's easy enough to do what you want the CSS way.
- geon 9y ago
  > inline styles It doesn't have to be inline styles. Styled components ( https://www.styled-components.com/ https://www.styled-components.com/ ) inject unique css classes.
  - breeny592 9y ago
    Among many other solutions as well (like JSS). CSS-in-JS !== inline styles, at all, yet seems to be a rallying call for people who fear "something different".
- wvenable 9y ago
  > Say I want every anchor tag on my site to be the same color But you don't. You have a popup calendar component and none of it's links are supposed to be colored at all. The problem isn't that anyone is wrong here; it's that there are actually multiple things going on here and depending on where you felt the pain last is where your opinion might fall. I use a lot of 3rd party components that have their own styling and attempting to affect that globally is disastrous for them. But I'm also rolling out an entirely new style and layout for all our applications and I'm not changing the code -- it's almost entirely global CSS changes. Sometimes it's hard to reconcile these two things.
- GlennS 9y ago
  I think in practice, the 'cascading' aspect of CSS turned out to be a bad idea. Most people seem to find that, rather than providing the consistent theming it promises, automatic inheritance of properties is confusing and unpredictable. Better to manage consistency through explicit includes of constants instead.
  - StillBored 9y ago
    Right, because there is a difference between styling and layout for non-trivial pages. CSS really should have added a "disable cascade" global flag when they introduced variables. Of course that is how people have been using less/sass for a decade+ now too.
    - talmand 9y ago
      I'm intrigued by this idea that people have been using less/sass for some time now without cascading?
      - StillBored 9y ago
        Well, I can see how I implied that, I meant only to say that it allows (and that is how I used it, and the couple times I saw others using it) one to define common properties as variables/mixins and ignore the cascading. Of course the result is cleanly written style sheets, but the output is a mass of duplicated code.
        talmand 9y ago
        I see now. In that case your source code is tidy and the mass of duplication in the output is not so bad while accounting for gzip. It's best to account for cascading and take advantage of it when suitable. But sometimes a project can just get away from you doing that and you may be better off doing what you're saying. It all depends on the project. Most of the talk on this page about styling components would result in mass duplication of code. But that might be best for their project.
- braindouche 9y ago
  > you lose the cascading advantage while at the same time you maintain the cascading disadvantages. You can't prevent CSS from cascading unless all your styles are inline, or you've OOCSSed your project so thoroughly that you've used classes to recreate inline styles.
nicodjimenez 9y ago
Yeah I'm really sick and tired of seeing these articles that add no value. Nothing has added more value in front end development in the last 5 years more than using JS for more and more of the view logic so why stop at HTML?

vlunkr 9y ago

I don't think you've contested any of the authors arguements here. They argue that inline styles are difficult to maintain and refactor, because of the tendency to copy-paste. Also to implement hover or other styles, you have to go back to CSS or use JS which is much worse. Also, it's not CSS, it's inline styles, and you lose the cascading advantage. Say I want every anchor tag on my site to be the same color, without CSS I have to go stick that style on every one individually. Realistically you would make it component, but it's a component that wouldn't need to exist with just one line of CSS. I'm sure it's possible to write in this way correctly, but every time I've seen it it's been awful. But that probably has more to do with the fact that the devs writing it really didn't care much to write clean styles. I'm not saying CSS is definitively better, that's just my opinion. But if you are going to advocate inline styles you have to know the trade offs and be able to justify them.

k__ 9y ago
The copy-paste problem is true. But on the other hand, I often end up with a few "primitive" base components that use CSS-in-JS and reuse these components. So I have a few components with "inline" styles and the rest uses these components. For a refactor I simply have to change these components.
onion-soup 9y ago
>you lose the cascading advantage What? Components and cascading? Only inline styles make sense if we are talking components. Each component must be self-contained, pure and predictive. Why the hell do we want 90s technology again?
- Pxtl 9y ago
  This. You can have global styling, or you can have properly-encapsulated components. The more you try to have it both ways, the more they step on each other's toes. And for me personally, at least for heavy-duty web applications, modular components are far more useful.
- talmand 9y ago
  You can do component-based, self-contained CSS without inline styles. I would recommend you not use inline styles when it's easy enough to do what you want the CSS way.
geon 9y ago
> inline styles It doesn't have to be inline styles. Styled components ( https://www.styled-components.com/ https://www.styled-components.com/ ) inject unique css classes.
- breeny592 9y ago
  Among many other solutions as well (like JSS). CSS-in-JS !== inline styles, at all, yet seems to be a rallying call for people who fear "something different".
wvenable 9y ago
> Say I want every anchor tag on my site to be the same color But you don't. You have a popup calendar component and none of it's links are supposed to be colored at all. The problem isn't that anyone is wrong here; it's that there are actually multiple things going on here and depending on where you felt the pain last is where your opinion might fall. I use a lot of 3rd party components that have their own styling and attempting to affect that globally is disastrous for them. But I'm also rolling out an entirely new style and layout for all our applications and I'm not changing the code -- it's almost entirely global CSS changes. Sometimes it's hard to reconcile these two things.
GlennS 9y ago
I think in practice, the 'cascading' aspect of CSS turned out to be a bad idea. Most people seem to find that, rather than providing the consistent theming it promises, automatic inheritance of properties is confusing and unpredictable. Better to manage consistency through explicit includes of constants instead.
- StillBored 9y ago
  Right, because there is a difference between styling and layout for non-trivial pages. CSS really should have added a "disable cascade" global flag when they introduced variables. Of course that is how people have been using less/sass for a decade+ now too.
  - talmand 9y ago
    I'm intrigued by this idea that people have been using less/sass for some time now without cascading?
    - StillBored 9y ago
      Well, I can see how I implied that, I meant only to say that it allows (and that is how I used it, and the couple times I saw others using it) one to define common properties as variables/mixins and ignore the cascading. Of course the result is cleanly written style sheets, but the output is a mass of duplicated code.
      - talmand 9y ago
        I see now. In that case your source code is tidy and the mass of duplication in the output is not so bad while accounting for gzip. It's best to account for cascading and take advantage of it when suitable. But sometimes a project can just get away from you doing that and you may be better off doing what you're saying. It all depends on the project. Most of the talk on this page about styling components would result in mass duplication of code. But that might be best for their project.
braindouche 9y ago
> you lose the cascading advantage while at the same time you maintain the cascading disadvantages. You can't prevent CSS from cascading unless all your styles are inline, or you've OOCSSed your project so thoroughly that you've used classes to recreate inline styles.

nicodjimenez 9y ago

Yeah I'm really sick and tired of seeing these articles that add no value. Nothing has added more value in front end development in the last 5 years more than using JS for more and more of the view logic so why stop at HTML?