我应该尽可能避免使用JS，并使用CSS代替？

我正在寻找最佳实践答案。目前我正在尝试在我的网站导航栏中添加下拉菜单。我发现我可以用CSS来做，而且我也可以用JS - Angular来做。我读过，因为与JS的恶意东西可以编程一些人禁用JS。因此，为了让您的网站能够在更多的电脑上运行，它应该用CSS编程。这有什么好处吗？我应该避免在JS中编码吗？我应该尽可能避免使用JS，并使用CSS代替？

来源

2016-05-26 Vindictive

取决于你在做什么，每个开发人员的意见都会有所不同，CSS在创建交互式Web体验方面有其局限性。还有一点需要考虑的是，如果您使用某些更新的/实验性的CSS功能，则由于浏览器的支持不足，您可以同样切断使用您的站点的重要人群。这个问题没有明确的答案。（除非你想构建一个漂亮的非交互式网站，只包含静态链接和...呃，动画GIF，好吧，有人会得到劣质的用户体验。） – Serlite

我反对把问题搁置，到目前为止的答案已经表明彼此同意，并且CSS是以下答案中提供的原因的最佳实践。当然也有例外，总是会有，但总的来说，我的问题的答案是尽可能使用CSS。 – Vindictive

自IE6以来，您可以制作一个完整的CSS下拉菜单，但有许多情况下您无法避免使用js（例如Ajax）。顺便说一句，我不同意答案。我无法在“主要基于观点”和“太宽泛”之间进行选择，因此： -/ – leaf

这里有几个重要的原因，你为什么更喜欢使用CSS而不是JS。

与JS 动画相比，CSS动画在性能上要好得多。 CSS在渲染动画时并不像JS那么多。
如果您的动画取决于屏幕宽度，CSS媒体查询就像魅力一样工作，没有任何延迟。但是如果你必须使用JS实现这一点，你将不得不将事件绑定到窗口大小，并对每个调整大小执行操作。
Javascript动画的开销总是比CSS动画稍高，因为最终JS动画会操纵动画的CSS样式。

但是，就像他们说的那样，每个优势都有其缺点。 CSS动画不能自由地执行任何动画。

动画元素的缩放，旋转和位置非常普遍。在CSS中，它们都被塞进了一个“转换”属性，使得它们不可能在一个单一元素上以真正独特的方式进行动画制作。例如，如果您想以不同的时间和方式独立动画“旋转”和“缩放”，会发生什么情况？也许一个元素持续脉动（振荡比例），你想旋转它。这只适用于JavaScript。

参考：Myth Busting: CSS Animations vs. JavaScript

如果你想JS动画的灵活性和CSS动画的速度，你应该尝试GSAP，这是建立在JavaScript和比CSS动画快得多。Here是比较CSS动画（使用Zepto），jQuery动画和GSAP动画的性能测试。不要忘记，结果可能因渲染引擎而异。

结论： 这是你如何去做。

简单的动画，CSS实现：使用CSS

简单的动画，不能用CSS实现：使用JS

重动画：使用GSAP或requestAnimationFrame手艺你的动画。

Here是CSS动画和JS实现之间的惊人性能比较。

来源

2016-05-26 16:21:10

CSS是设计（X）HTML文档的最佳方式。

即使您需要使用原始JavaScript或DOM或者像jQuery这样的框架来设计文档样式，这也意味着您要为CSS规则赋予值。

规则应该是：

使用纯CSS时，你可以风格预见的文件 - 你也可以提高你的CSS和使用CSS选择器概括或复杂场景 - 。当文档或其中的某些部分不可预测或即时创建，并且正在应用淡入淡出或任何其他特殊效果时，请使用JavaScript/DOM或JavaScript等框架 - 事实上，CSS 3.0已经过渡，因此可能在没有JavaScript的情况下做很多事情 - 。毕竟，想一想使用CSS完成事情有多简单，以及使用JavaScript代替什么样的矫枉过正，并记住它的缺点（一个非常重要的观点：浏览器的兼容性和性能）。

您使用的CSS越多，越具有标准化，跨浏览器，性能和可维护性的网络。

来源

2016-05-26 16:20:52

Css不会将您从浏览器兼容性问题中拯救出来。 – leaf

我应该尽可能避免使用JS，并使用CSS代替？

回答

相关问题