更好或更糟:使用JavaScript和CSS进行样式化

Question

我正在开发一个响应式设计,想知道使用JavaScript或CSS设置元素样式是否更好？CSS肯定更容易维护,我不会争辩,但我更习惯用JavaScript构建对象.也许我为自己做了比我应该做的更多的工作,但我觉得我有更多的控制整体,我喜欢能够挂钩屏幕上的每个对象.

我有构造函数生成整个页面布局并将其推入DOM.没有图像,只有纯JavaScript样式和SVG图标.

我想知道的是:

我倾向于避免使用jQuery,因为我更感兴趣的是学习什么使得现在正常工作,所以只有纯JavaScript和CSS3.

Answer 1

您的样式应尽可能使用CSS完成.根据您的需要设置不同的类,然后在JS绝对必要时添加或删除类.

要记住的一件事是通过JS改变样式是一次性的改变.动态添加的元素VIA Ajax不会自动继承样式更改.坚持使用CSS的另一个好理由.

正如链接中所建议的那样

将关于样式的所有内容放在CSS文件中是最佳实践.

HTML =>结构

CSS =>样式

JS =>逻辑

Answer 2

CSS是设置(X)HTML文档样式的最佳方式.

即使您需要使用原始JavaScript或DOM或某些框架(如jQuery)来设置文档样式,这也意味着您要为CSS规则赋予值.

规则应该是:

在为可预测文档设置样式时使用纯CSS - 您也可以增强CSS并将CSS选择器用于广义或复杂场景 - .
使用JavaScript/DOM或JavaScript之类的框架,当文档或部分文档无法预测或即时创建并且您正在应用特殊效果(如淡入淡出或其他任何其他)时 - 事实上,CSS 3.0具有过渡,因此可以使用没有JavaScript就做很多事情 - .

毕竟,想想使用CSS完成的事情有多简单,使用JavaScript代替什么样的矫枉过正,并记住它的缺点(非常重要的一点:浏览器兼容性和性能).

您使用的CSS越多,标准化,跨浏览器,高性能和可维护的Web就越多.

Answer 3

UI应该留给UI解决方案（HTML / CSS）。JavaScript 仅应提供其他功能。

作为补充（因为您提到CSS3），如果您指的是动画和CSS3的新添加（否则可能无法使用），则可以使用javascript，但只能作为后备。（例如，使用jQuery的fadeToCSS3创建动画时间轴）。