Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標籤來做介面
不同瀏覽器對網頁預設的元件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 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 程式碼了。
想要做一個輸入框和提交表單，往往需要這樣的程式碼：
而使用 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 上，任何個人和公司都可以免費下載使用。