Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why I Write CSS in JavaScript

mxstbr.com

Post reply on HN
Print view View original

61–70 of 255 posts

Re: Why I Write CSS in JavaScript

#61

Post by treerunner »

zeroname wrote: post #50
lousken wrote: post #33

If you make sure your site works without javascript as well(unless it's actually an app) it's fine by me.

This is a requirement that most sites can simply dismiss these days. The distinction between an app and a website is blurry, a lot of interaction simply works far better with Javascript. Supporting "no Javascript" can be costly. It's possible with server-side React and careful engineering, but why bother? What's the impact on the business?

Bother for human rights. "Javascript" is costly too - but maybe not your concern since it's not a business cost.

Re: Why I Write CSS in JavaScript

#62

Post by realharo »

antoineMoPa wrote: post #25

The down-side with this is very high coupling between UI logic and style. If style becomes out of fashion, you have to modify files that contain logic. If framework (react/vue) becomes out of fashion, keeping styles will be difficult. The other down-side is thousands of web developers having to re-learn CSS and the tooling behind your app instead of just changing CSS files.

>If style becomes out of fashion, you have to modify files that contain logic.

So just put the styles in separate .js files and import them.

Re: Why I Write CSS in JavaScript

#63

Post by gedy »

tobr wrote: post #32
antoineMoPa wrote: post #25

The down-side with this is very high coupling between UI logic and style. If style becomes out of fashion, you have to modify files that contain logic. If framework (react/vue) becomes out of fashion, keeping styles will be difficult. The other down-side is thousands of web developers having to re-learn CSS and the tooling behind your app instead of just changing CSS files.

In practice, I think a lot of people have found that you can rarely do a complete overhaul of a website’s design using only CSS. Even if you could, it would be impossible to feel confident that your changes look reasonable across all uses of said CSS. So if you’re doing a big redesign you will usually have to work with logic anyway. I think there’s truth to your second point though - reusing styles in parts of a proj…

> you can rarely do a complete overhaul of a website’s design using only CSS

Full design yes, but branding/theming is much easier if you use an external styling framework like Bootstrap 4 or Foundation and use their component and utility classnames.

We have a 300+ page app and tried the one stylesheet per component thing with theme and layout all combined in the past, and was a huge mistake.

Banning most custom CSS in place of using the Bootstrap component and util classes has been so much easier.

Re: Why I Write CSS in JavaScript

#64

Post by chooseaname »

Touche wrote: post #30
mxstbr wrote: post #2

Author here, happy to respond to any questions. AMA!

Why do you think CSS-in-JS has only caught on in the React community?

Herd mentality.

RDD (resume driven development).

Cargo culting.

Ooooh shiney!

"I'm not confident enough to make my own decisions, so I'll let the 'community' decide for me."

Re: Why I Write CSS in JavaScript

#65

Post by cageface »

bpicolo wrote: post #12

CSS in JS is one place where Vue has a substantially better experience. Being able to toss scoped-css, written as normal in a css block is what I call nailing the developer experience. It is all the best parts of css in js with none of the downsides.

You can do this with styled-components in react too.

https://www.styled-components.com/

Re: Why I Write CSS in JavaScript

#66

Post by pmlnr »

> Why I Write CSS in JavaScript

tl;dr because it's convenient.

It's also redundant, goes completely against the features of CSS (the cascading part), doesn't utilize the possibility of selectors, children, etc, ugly, and computationally heavy.

But yeah, why not.

Re: Why I Write CSS in JavaScript

#67

Post by pmlnr »

ggregoire wrote: post #59
martin_a wrote: post #42

This sounds like an awful idea. Just put your CSS in a .css file where it can be cached, delivered by CDNs and can easily be edited in a single place. Separation of content and presentation has been around for a good reason. One should always avoid mixing logic and design because it will break some day, no matter how well you think you handle it.

> Just put your CSS in a .css file where it can be cached, delivered by CDNs .js files are cached and delivered by CDNs too. > can easily be edited in a single place If you change the name of a class (or add a new one, delete another one, edit the structure of the component, etc...), then you have to open and edit 2 files. With author's solution you don't. The CSS is collocated with the component. > Separation of con…

> .js files are cached and delivered by CDNs too.

Not in 2019, in the age of excessive A/B testing, where every page load gives you a different set of JS.

Re: Why I Write CSS in JavaScript

#68

Post by zeroname »

treerunner wrote: post #61
zeroname wrote: post #50

Earlier quoted context omitted.

This is a requirement that most sites can simply dismiss these days. The distinction between an app and a website is blurry, a lot of interaction simply works far better with Javascript. Supporting "no Javascript" can be costly. It's possible with server-side React and careful engineering, but why bother? What's the impact on the business?

Bother for human rights. "Javascript" is costly too - but maybe not your concern since it's not a business cost.

> Bother for human rights.

Which human right, specifically? Humans have the "right" to install a modern browser and enable Javascript.

> "Javascript" is costly too - but maybe not your concern since it's not a business cost.

Indeed, the cost you pay to run Javascript does not show up in my budget, just like I don't pay your ISP to serve my site to you.

Re: Why I Write CSS in JavaScript

#69

Post by realharo »

LocalPCGuy wrote: post #19

I understand the "pit of success" idea, particularly when it comes to more junior devs. But I don't necessarily agree that you need stringent processes to get most of the gains you cite from using something like SCSS or even regular CSS these days. It's really easier than ever. 1- append only? No, each module/feature/widget gets its own CSS file, imported to the main app CSS file. Delete the widget? Delete the file.…

There is this video about inline styles https://www.youtube.com/watch?v=k3OF4A30jSQ, based on a lot of real-world experience.

It addresses some of these points at 35:23 - that you can kind of make CSS work if you always do everything right, but it's not as easy in practice (most of the experience stuff is at the beginning - which shows that they did kinda do everything "right").

Re: Why I Write CSS in JavaScript

#70

Post by beefalo »

martin_a wrote: post #42

This sounds like an awful idea. Just put your CSS in a .css file where it can be cached, delivered by CDNs and can easily be edited in a single place. Separation of content and presentation has been around for a good reason. One should always avoid mixing logic and design because it will break some day, no matter how well you think you handle it.

If you need caching then you would likely server render your page and that would inline all of the critical css to be cached as well.

Writing your css in JS files also does nothing to prevent you from separating content and presentation. You can write components that just handle styling. I see more problems with separation in css where you end up with one giant file that handles the whole site.

Post reply on HN