Comment by vlunkr | Hacker News Reader

Comment by vlunkr | Hacker News Reader

Parent Full thread

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.

> 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.

> inline styles

It doesn't have to be inline styles. Styled components ( https://www.styled-components.com/ ) inject unique css classes.

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".

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.

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.

I'm intrigued by this idea that people have been using less/sass for some time now without cascading?

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.

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.

>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?

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.

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.

> 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.

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.

Reply on news.ycombinator.com