同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 CSS 框架。

關于 Pico.css

Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點是樣式都基于 HMTL 原始的標簽名和內置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護性強，能夠幫助開發者構建自己的 UI 系統，也可以直接用于快速的小型項目中。

截止發文日期，Pico.css 在 Github 上已經有高達 3898 個 Star。

Pico.css 框架的特點

• 去 class 以及原生語義化的代碼。Pico.css 盡可能使用原生的 HTML 元素的標簽名稱來定義樣式，整個框架使用的 class 名稱不到10個
• 純 CSS 實現。所有組件都由一個 10KB（壓縮后）的 CSS 文件實現，無包管理，沒有依賴和外部文件，甚至連 javascript 代碼都沒有
• 響應式布局。內置響應式的柵格系統，在 PC / 手機 / 平板等不同屏幕大小的設備上排版美觀一致
• 支持深色主題。附帶兩個漂亮的顏色主題，根據用戶喜好一鍵啟用

開發上手

引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：

當然也可以通過 npm 安裝：

然后就可以編寫 html 代碼了。

HTML 原生語義化的編程

想要做一個輸入框和提交表單，往往需要這樣的代碼：

而使用 Pico.css，只需要：

Pico.css 內置了很多基礎的組件，包括常用表單控件、表格、彈窗、導航菜單、卡片等，代碼非常簡潔，比如實現一個美觀的進度條，只需要這點代碼：

使用深色主題

Pico.css 內置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。

官網還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學習 html 語法的時代。

通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標簽名、內置的屬性以及自定義屬性來命中，這樣就規避了常規的只使用 class 來區分的“命名地獄”，是一種非常好的網頁編程思路。

面向對純粹 HTML 有極致追求的開發者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標簽名和屬性編寫網頁。

使用 Pico.css 的原因

在項目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點笨重了，如果使用當前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項目的標配，考慮到目前市面上大多數 UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。

css 樣式的寫法很自由，目前前端開發存在一個趨勢，為了做精美的界面，需要花費大量的時間來寫樣式，為了樣式可以復用，絞盡腦汁給 class 起名字，甚至網上還有各種 class 命名規范，這可能導致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護。

Pico.css 的出現給這樣的開發現狀提供了一種新思路，不僅可以直接用在實際項目中，也能夠作為構建自己的 UI 庫的基礎樣式。

免費開源說明

Pico.css 是一個免費開源的項目，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面｜那些免費的磚

亮有特色的 CSS 組件庫，組件代碼非常簡潔，也支持深度定制主題、定制組件，可以搭配 Vue / React 等框架使用。

關于 daisyUI

daisyUI 是一款極為流行的 CSS UI 組件庫，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構建的組件庫。截止發文日期，已經在 Github 得到 11,200 Star， 944,600 次 NPM 安裝。

Tailwind CSS 是一個功能類優先的 CSS 框架，通過類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構建網站，在 HTML 代碼上就能完成開發，不需要再自己想各種 CSS 命名。

daisyUI 作為 Tailwind CSS 的組件庫，不僅繼承了它的優點，而且代碼更簡潔，主題非常漂亮有特點，打開官網就喜歡上它了。

daisyUI 的技術特性

• 提供 45 個常用組件，多達 29 款主題，款款都是精品
• 相比 Tailwind CSS 的原子類，daisyUI 采用語義化的 class 名，寫出更純凈的 HTML
• 支持深度自定義、可定制主題
• 是一個純凈 CSS 組件，所以支持和任意 Vue / React 這樣的框架一起使用

開發上手體驗和使用感受

首先說說我最喜歡的主題，daisyUI 提供了 29 款主題，配色很舒服，各有特色，我首先想到用來做個人網站的主題，一定會很酷。

主題風格預覽

安裝和使用

需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安裝，最簡單的方式是 cdn 引入：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

生產環境更推薦用 npm 的方式，這樣打包出來的項目會小很多：

安裝 daisyUI

npm i daisyui

然后，在你的tailwind.config.js文件里追加 daisyUI 的設置

module.exports = {
  //...
  plugins: [require("daisyui")],
}

“反” Tailwind CSS

使用過 Tailwind CSS 的開發者一定對這種寫一堆 class 名來構建組件的方式印象很深刻，我一直沒有推薦 Tailwind CSS，就是因為個人實在不喜歡零零碎碎的 CSS 類名，我更傾向于寫語義清晰的類名來開發組件。我們來看看實現一個常規的按鈕，兩種寫法的區別：

<!-- Tailwind CSS 的寫法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold 
    text-cente text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>

<!-- daisyUI 的寫法 -->
<a class="btn btn-primary">Button</a>

daisyUI 的寫法實在太簡潔了，所以說 daisyUI 簡直是“反” Tailwind CSS 思路一點也不為過，不過 Tailwind CSS 的作者認為語義化的 CSS 并不好維護，因為隨著項目的迭代，很多 class 名早已失去了原有的意義了。各位前端小伙伴，你們覺得呢？

45 個組件如果沒法滿足，官方還提供了自定義組件的工具類，開發者可以快速構建自定義組件。官網提供了詳盡的中文文檔，純 CSS 本身也易懂，對應的組件也有 HTML 代碼例子，上手使用完全不是問題。

總的來說，這是一款漂亮、流行，代碼簡潔的 web UI 組件庫，熟悉以后能提高開發效率，不妨寫個快速 demo 嘗試一下。

免費開源說明

daisyUI 是基于 Tailwind CSS 構建的 CSS 組件庫，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用，也可以用于商業項目。

和 daisyUI 類似的框架還有之前推薦過的 Bootstrap 和 Pico.css，感興趣的開發者也可以前往了解。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點【了解更多】查看本次分享的網址。