我應該儘可能避免使用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代替？

回答

相關問題