視覺盛宴篇！推薦 12 個好用的 CSS 的開源項目，YYDS ！

1. animate

強大的跨平臺的預設 css3 動畫庫，也是前端圈非常有名的動畫庫。

內(nèi)置了很多典型的 css3 動畫，兼容性好使用方便。

https://github.com/animate-css/animate.css

2. tailwindcss

無需離開您的HTML，即可快速建立現(xiàn)代網(wǎng)站。

Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構(gòu)建出任何設計。

https://github.com/tailwindlabs/tailwindcss

3. bulma

基于 Flexbox 的現(xiàn)代 CSS 框架。

Bulma 是一個免費、開源的 CSS 框架，它提供了易于使用的前端的組件，您可以輕松地組合這些組件來構(gòu)建響應式 Web 界面。

無需懂得 CSS，有了它，即使完全不懂 CSS，也可以輕而易舉做出美觀的網(wǎng)頁。

Bulma 框架最大的特點，就是簡單好用。所有樣式都基于 class，只需為 HTML 元素指定class，樣式立刻生效。

https://github.com/jgthms/bulma

4. styled-components

styled-components 是一個針對 React 的 css in js 類庫。

它的優(yōu)點在于：

• 貫徹 React 的 everything in JS 理念，降低 js 對 css 文件的依賴
• 組件的樣式和其他組件完全解耦，有效避免了組件之間的樣式污染

https://github.com/styled-components/styled-components

5. Hover

Hover.css 是一款非常簡單實用的純 CSS3 鼠標滑過特效動畫庫。

有 100 多種效果可以選擇，包括：2D 動畫、背景動畫、邊框動畫、圖標動畫、發(fā)光漸變、陰影、對話框、折角等 100 多種特效。

https://github.com/IanLunn/Hover

6. postcss

是一個用 JavaScript 工具和插件轉(zhuǎn)換 CSS 代碼的工具。

https://github.com/postcss/postcss

7. pure

一組輕量級、響應式純 css 模塊，適用于任何 Web 項目。

https://github.com/pure-css/pure

8. SpinKit

SpinKit 是一套網(wǎng)頁動畫效果，包含 8 種基于 CSS3 實現(xiàn)的很炫的加載動畫。

借助 CSS3 Animation 的強大功能來創(chuàng)建平滑，易于定制的動畫，SpinKit 的目標不是提供一個每個瀏覽器都兼容的解決方案，而是給現(xiàn)代瀏覽器提供更優(yōu)的技術(shù)實現(xiàn)方案和更佳的使用體驗。

https://github.com/tobiasahlin/SpinKit

9. uikit

一款輕量級、模塊化的前端框架，可快速構(gòu)建強大的 web 前端界面。

UIKit 提供了全面的 HTML、CSS 及 JS 組件，它們使用簡單，容易定制和擴展。

https://github.com/uikit/uikit

10. 30-seconds-of-css

滿足您所有開發(fā)需求的簡短 CSS 代碼片段。

CSS 片段集合包含 CSS3 的實用程序和交互式示例。它包括用于創(chuàng)建常用布局、樣式和動畫元素的現(xiàn)代技術(shù)，以及用于處理用戶交互的片段。

https://github.com/30-seconds/30-seconds-of-css

11. solved-by-flexbox

曾經(jīng)僅靠 CSS 很難或不可能解決的問題，現(xiàn)在通過 Flexbox 變得簡單了。

https://github.com/philipwalton/solved-by-flexbox

12. emotion

Emotion 是一個用 JavaScript 編寫 css 樣式的庫，下一代 CSS-in-JS 。

它提供了強大的、可預測的樣式組合，還為開發(fā)人員提供了豐富的特性體驗，如源映射、標簽和測試實用程序。

同時支持字符串和對象樣式。

https://github.com/emotion-js/emotion