15 個有用的 JavaScript 和 CSS 庫

高質量的網頁設計需要直觀和用戶友好的界面，而且屏幕上的元素也起着非常重要的作用。Web 設計師不斷地尋找優秀代碼的集合，希望能提升工作效率。但找到合適的工具庫並不總是那麼容易的。網絡上有太多的資源可以使用，而且也是免費的，因此很難判斷哪些資源比較好。這就是精心搜索並編寫這個最好的庫列表的原因。

無論是希望創建一個視覺上吸引人和功能強大的佈局，還是需要在表單和其他區域添加屏幕上的規則和驗證，你都會喜歡這個集合。這裏列出的庫是由具有豐富網頁設計經驗的專家創建的，這些庫不僅是經驗豐富的設計師的優秀工具，也是適用於初學者的好工具。這個集合將會幫你節省很多時間，來看一看吧！

1. Buefy

適用於 Vue.js 項目的輕量級 UI 框架，使用流行的基於 flexbox 的 CSS 庫 Bulma構建。它具有典型的 Web APP 所需的全部組件，包括像模態框、吐司和通知這樣的動態元素，使開發者可以快速添加任何用戶界面到現有的 Vue.js 項目。

2. HR.js

零依賴庫，用於在 DOM 中以編程的方式高亮顯示並替換字符串，HR.js API 的使用不能再簡單了 — 只需使用 CSS 選擇器來定位目標文本的父 HTML 元素，選擇要突出顯示的單詞，設置背景顏色，然後就完成了！

3. React VR

React VR 是爲 VR 應用而創建的框架，運行在 Web 瀏覽器中。它將現代 API（例如 WebGL 和 WebVR）與 React 的聲明能力結合起來，通過各種設備提供適用於消費者的體驗。

4. Tippy.js

輕量的純 JavaScript 動態提示工具插件庫。它提供了大量的不同懸停效果和超過 20 個可定製的選項。Tippy.js 是超級輕量的，並且具有相當不錯的瀏覽器兼容性，當不被支持時會自動回退到常規的 title 屬性。

5. Barba.js

沒有依賴關係的 JavaScript 庫，用於在單頁面應用程序的視圖之間創建平滑的過渡。該邏輯是圍繞PJAX（push state AJAX）構建的，它會檢查所有有效的 URL，阻止它們的正常行爲，並通過 XMLHttpRequest 加載新頁面。Barba 還會確保通過使用 Push State API，使得狀態的更改可在頁面的 URL 中正確反映出來。

6. UIkit

優秀的 CSS 和 JavaScript 前端框架，包括 SVG 圖標字體和幾十個組件。無論是外觀還是作爲一個框架，UIkit 的設計都非常好，它具有統一的樣式，易於記憶的 API，許多自定義選項和有用的修飾符類。文檔也是寫得十分好。

7. Haul

Haul 是用於開發 React Native 應用程序的命令行工具。它可以直接替代 React Native packager，提供更好的 webpack 支持，改進的錯誤消息，大大減少編譯時間。Haul 是可定製和完全開源的，文檔也十分優秀。

8. AcrossTabs

用於在瀏覽器選項卡之間進行通信的 JavaScript 庫，使一個網頁可以打開和關閉其他瀏覽器選項卡。父選項卡可以訪問有關其子選項卡的有用信息，包括唯一的 ID 以及子選項卡是否仍然打開或已關閉。

9. Stylelint

Stylelint 是一款現代化的 CSS linter，可幫助團隊在樣式表中強制使用客觀的 CSS 標準。該庫非常強大，可以禁用或列出特定屬性，捕獲錯誤和識別 SCSS 語法。StyleLint 是完全可定製的，可以選擇添加新規則或移除你不認可的規則。

10. Iconate

優秀的 vanilla JavaScript 庫，可讓你將點擊中的一個圖標轉換爲另一個圖標，並具有各種平滑的動畫。Iconate 與所有 CSS 圖標字體一起使用 — 只需在 HTML 中添加一個圖標，並使用簡單的 JavaScript API 來選擇將其轉換爲哪一種，有 15 種以上的動畫可供選擇。

11. React-Datasheet

React 組件用於嚮應用添加功能齊全的類 Excel 數據表格。表格單元可以自由編輯、分組選擇、複製、粘貼、刪除，以及你期望的其他任何功能。其 GitHub 主頁上有三個有用的例子 —— 一個基本的表格、帶有公式的 spreadsheet，以及帶有嵌套組件的表格。

12. Pure CSS

模塊化 CSS 框架，體積十分小，壓縮後整個庫只有 3.8kb，還可以通過移除一些不需要的部分進一步減小大小。模塊包括基本的樣式集，響應式網格，表單組件，按鈕，表格和菜單。

13. Simple Icons

收集了大量社交網絡、app、服務和其他品牌的免費圖標。因爲所有的圖標都是使用 SVG 製作的，所以它們可以縮放到任何的尺寸而不用擔心變模糊。基於 SVG 還使得它們非常輕量 — 大多數低於 500 bytes，具有更多細節的大約爲 1、2KB。

14. Chroma.js

用於處理顏色的小巧的 JavaScript 庫。它提供了豐富的 API，具有超過 50 種操作顏色的功能，可在顏色模式之間切換改變亮度和飽和度，創建漸變梯度等許多有用的方法。

15. Weex

Weex 是構建跨平臺移動應用的框架，類似於 React Native，但適用於 Vue.js 項目。它可以讓你使用 HTML，CSS 和 JavaScript 編寫應用，然後在 Android 中將其渲染成 Java 或在 iOS 中將其渲染成 Swift。該框架有許多內置組件、API 和其他有用的功能。