Hello Ida,

I have been working on a fair number of projects and in my current one, a network monitoring tool, I have come across this problem. Not only styling via JS is wrong, keeping HTML templates within JS files is also counter-productive. Here are 3 reasons to start with:

1) The first reason against this approach is the separation of concerns on the front-end layer:

• HTML for structure
• JS for mainpulation and logic
• CSS for styling and interaction

2) Maintainability Working on separated files makes your life easier, there is no debate in that. Once the source code grows, you will have trouble maintaining mixed code.

3) FOUC (Flash of unstyled content) is also a reason, @fazlerocks is right

And there are other as well. The problem with the development ecosystem these days, is that a lot of ideas, even crappy ones get traction. Time will filter them and we will see if styling via JS will fly.

PS: Regarding BEM, I wouldn't go that path. It provides a solution for a non-existing problem.

Hope it helps.

FOUC (Flash of unstyled content) is one of the main reasons why JS is not used for styling.

You may see some elements without any CSS Styles because JS takes time to load completely and execute.

Also, maintaining such styles becomes very difficult as your website grows and becomes complex.

Just shared - you may like :) hashnode.com/post/finally-css-in-javascript-meet-…

Here is an article: jamesknelson.com/why-you-shouldnt-style-with-java…

I would recommend BEM instead.

I also believe "JS CSS" slower, but I have no proof.