在进行JavaScript大量工作时，将所有样式保留在CSS文件中有什么好处？

Question

There seems to be the belief out there that ALL stylings need to be kept in the CSS files. If I am doing purely JavaScript work, this does not make sense to me. If I create a JavaScript object called : "StatisticSummaryPanel", surely it is better to keep the CSS stylings inside the JavaScript object. That way I only have to maintain one file instead of two files.

Answer 1

It's generally considered better practice to have your CSS, JavaScript and HTML in separate files as it makes it easier to locate, understand and debug for yourself and for potential future developers who come along and work on your files.

In your JavaScript file it's just a cleaner approach to simply refer to a class or an ID that has it's properties stored in the CSS file.

If you reuse a class for example in multiple JavScript objects and you need to change the properties of that class then you only have to update the CSS file.

Answer 2

It helps if you need to reuse the same style in a different page/javascript file. This way if your style changes, you need not change in all the files you use it.

Also, it can be cached and make your page little faster.

And coming to maintain more files, its a call based on size of your files. If it's too huge, a single file will be costly to maintain.

Answer 3

There are several problems:

1. Code legibility

Writing CSS or HTML in Javascript is verbose and difficult to read and edit compared to when written directly in its own syntax.

2. Confusing behaviour and logic

A bare minimum of styling is necessary to achieve basic functionality, but appearance and logic shouldn't be confused. Figuring out how and where to integrate code about appearancee into code about behaviour is a non-sensical task. Your code will be much clearer without esoteric style requirements baked into your behavioural scripting.

3. Retrieval

People don't expect to find CSS in Javascript. When someone wants to try and change the appearance of the StatisticSummaryPanel , they're going to look for it in the CSS. The last place they'll expect to find its stylistic definition is in the JS.

Answer 4

Separation of concerns: in this case, the separation of presentation (how various effects appear and render) and behavior (the causes of said effects). In our experience, separating the two allows us to hire great graphic designers for the former, and great programmers for the latter.

For a small project, it probably doesn't matter, as you're the only one responsible for the code. But if you plan to expand to a team, it's worth thinking about how different members may specialize, and how best to coordinate changes amongst your teammates.