更好或更坏：使用 JavaScript 与 CSS 进行样式设置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19188419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Better or Worse: Styling with JavaScript vs CSS
提问by Ryan Dunphy
I'm working on a responsive design would like to know if it is better to style an element using JavaScript or with CSS? CSS is certainly easier to maintain, I won't argue that, but I'm a lot more comfortable building an object in JavaScript. Maybe I'm making more work for myself than I should, but I feel like I have more control overall and I like being able to hook into every object on the screen.
我正在研究响应式设计，想知道使用 JavaScript 还是 CSS 设置元素样式更好？CSS 肯定更容易维护，我不会争辩说，但我更习惯在 JavaScript 中构建一个对象。也许我为自己做的工作比我应该做的要多，但我觉得我有更多的整体控制权，我喜欢能够连接到屏幕上的每个对象。
I have constructors that generate the entire page layout and push it into the DOM. No images, just pure JavaScript styling and SVG icons.
我有生成整个页面布局并将其推送到 DOM 的构造函数。没有图像，只有纯 JavaScript 样式和 SVG 图标。
What I would like to know is:
我想知道的是：
- What performs better?
- What, if any hardware support is there for JS or CSS?
- Is a pure JavaScript solution better than using CSS Calc()?
- What's more portable?
- What's more forward compatible?
- 什么表现更好？
- 什么，如果有针对 JS 或 CSS 的任何硬件支持？
- 纯 JavaScript 解决方案是否比使用 CSS Calc() 更好？
- 什么更便携？
- 什么更向前兼容？
I tend to avoid jQuery as I'm more interested in learning what makes things work right now, so pure JavaScript and CSS3 only, please.
我倾向于避免使用 jQuery，因为我更想了解是什么让事情现在起作用，所以请只使用纯 JavaScript 和 CSS3。
回答by adam
Your styling should be done using CSS wherever possible. Have different classes setup according to your needs, then add or remove classes when absolutely necessary with JS.
您的样式应该尽可能使用 CSS 来完成。根据您的需要设置不同的类，然后在绝对必要时使用 JS 添加或删除类。
One thing to keep in mind is that changing styling via JS is a one-time change. Elements added dynamically VIA Ajax won't inherit the styling changes automatically. Another good reason to stick with CSS.
要记住的一件事是，通过 JS 更改样式是一次性更改。通过 Ajax 动态添加的元素不会自动继承样式更改。另一个坚持使用 CSS 的好理由。
See this post for additional confirmation Should I load responsive design via JS or CSS
请参阅此帖子以获取更多确认我是否应该通过 JS 或 CSS 加载响应式设计
As suggested in the link
正如链接中所建议的
Putting everything regarding styles in the CSS files is the best practice.
HTML => Structure
CSS => Styles
JS => Logic
将有关样式的所有内容都放在 CSS 文件中是最佳实践。
HTML => 结构
CSS => 样式
JS => 逻辑
回答by adam
CSS is the best way to style an (X)HTML document.
CSS 是设置 (X)HTML 文档样式的最佳方式。
Even if you need to style a document by using raw JavaScript or DOM, or some framework like jQuery, it'll mean you're giving values to CSS rules.
即使您需要使用原始 JavaScript 或 DOM 或某些框架（如 jQuery）来设置文档样式，这也意味着您要为 CSS 规则赋值。
The rule should be:
规则应该是：
Use pure CSS when you can style a predictable document - also you can enhance your CSS and use CSS selectors for generalized or complex scenarios -.
Use JavaScript/DOM or frameworks like JavaScript when document or portions of it aren't predictable or are created on-the-fly and you're applying special effects like fades or any other - in fact, CSS 3.0 has transitions so it's possible to do a lot of things without JavaScript -.
当您可以为可预测的文档设置样式时，请使用纯 CSS - 您也可以增强您的 CSS 并在通用或复杂的场景中使用 CSS 选择器。
当文档或其部分不可预测或动态创建并且您正在应用淡入淡出或任何其他特殊效果时，请使用 JavaScript/DOM 或 JavaScript 之类的框架 - 事实上，CSS 3.0 具有过渡，因此可以不用 JavaScript 就可以做很多事情 - 。
After all, think how simpler can be things done with CSS and what kind of overkill is using JavaScript instead, and keep in mind its cons (a very important point: browser compatibility and performance).
毕竟，想想使用 CSS 可以完成多简单的事情以及使用 JavaScript 是多么的矫枉过正，并记住它的缺点（非常重要的一点：浏览器兼容性和性能）。
The more CSS you use, the more standarized, cross-browser, performant and maintainable web.
您使用的 CSS 越多，Web 就越标准化、跨浏览器、高性能和可维护。
回答by Brad Christie
UI should be left to UI solutions (HTML/CSS). JavaScript should onlyprovide additional functionality.
UI 应该留给 UI 解决方案 (HTML/CSS)。JavaScript 应该只提供额外的功能。
To supplement this (because you mention CSS3) if you're referring to animations and new additions to CSS3 (that may not otherwise be available) you can use javascript--but only as a fallback. (e.g. using jQuery's fadeToover creating an animation timeline with CSS3).
为了补充这一点（因为您提到了 CSS3），如果您指的是动画和 CSS3 的新增功能（否则可能无法使用），您可以使用 javascript——但只能作为后备。（例如，使用 jQueryfadeTo来创建带有 CSS3 的动画时间线）。
回答by Brian
There are serious drawbacks when applying styles with CSS, not only because you have no control over specificity, it is slow (as you'd expect), any .css()calls involving classes, e.g. $('.something').css(...), will apply css to only elements of that class that exist at the time, not .somethings created in the future.
使用 CSS 应用样式时存在严重的缺点，不仅因为您无法控制特定性，而且速度很慢（如您所料），任何.css()涉及类的调用，例如$('.something').css(...)，将仅将 css 应用于该类中存在于时间，不是.something在未来创造的。
