同瀏覽器對網(wǎng)頁默認(rèn)的組件解析樣式不一致，而且不夠美觀，網(wǎng)頁樣式開發(fā)需要大量時間，今天介紹一款優(yōu)雅的 CSS 框架。

關(guān)于 Pico.css

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

截止發(fā)文日期，Pico.css 在 Github 上已經(jīng)有高達(dá) 3898 個 Star。

Pico.css 框架的特點

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

開發(fā)上手

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

當(dāng)然也可以通過 npm 安裝：

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

HTML 原生語義化的編程

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

而使用 Pico.css，只需要：

Pico.css 內(nèi)置了很多基礎(chǔ)的組件，包括常用表單控件、表格、彈窗、導(dǎo)航菜單、卡片等，代碼非常簡潔，比如實現(xiàn)一個美觀的進(jìn)度條，只需要這點代碼：

使用深色主題

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

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

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

面向?qū)兇?HTML 有極致追求的開發(fā)者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標(biāo)簽名和屬性編寫網(wǎng)頁。

使用 Pico.css 的原因

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

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

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

免費開源說明

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

關(guān)注我，持續(xù)分享高質(zhì)量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網(wǎng)址。

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

者 | Tim Anderson

譯者 | 王強

策劃 | Tina

AI 大模型超全落地場景&金融應(yīng)用實踐，8 月 16 - 19 日 FCon x AICon 大會聯(lián)訣來襲、干貨翻倍！

用于擴(kuò)展 HTML 規(guī)范的 Htmx 項目發(fā)布了 2.0 版，這是該項目自 2020 年 11 月 發(fā)布 1.0 版以來的第一個主要版本。

Htmx 2.0 取消了對 Internet Explorer 的支持，并將擴(kuò)展項移出了核心存儲庫，這樣每個擴(kuò)展都可以按照自己的節(jié)奏發(fā)布更新了。新版本還刪除了一些已棄用的屬性，并將 HTTP DELETE 請求更改為使用參數(shù)。

新版還加入了一些新特性，包括 htmx.swap() 方法，該方法用新內(nèi)容替換現(xiàn)有內(nèi)容。它替換并改進(jìn)了現(xiàn)有的內(nèi)部 selectAndSwap() 方法。新版還改進(jìn)了與 Web 組件、可重復(fù)使用的自定義元素的集成。

新版發(fā)布博文解釋說，為了避免破壞現(xiàn)有項目，1.x 版本將在 NPM（節(jié)點包管理器）中繼續(xù)標(biāo)注為為“l(fā)atest”，2.x 還是“next”，直到 2025 年 1 月 1 日為止。遷移到 2.0 版并不困難，但根據(jù)遷移指南，用戶可能需要做一些工作。

Htmx 是一種新的前端開發(fā)方法，側(cè)重于 HTML 而非 JavaScript（盡管它是作為 JavaScript 庫實現(xiàn)的）。Htmx 是從之前的一個項目 intercooler.js 發(fā)展而來的，后者是由 Htmx 發(fā)明者 Carson Gross 于 2013 年創(chuàng)建。這兩個項目的靈感都來自于這樣一種觀點：HTML 的特性一直因為行業(yè)對 JavaScript 框架的關(guān)注而被限制住了，而 JavaScript 框架的復(fù)雜性卻一直在增長。Gross 在 2020 年推出 1.0 版時寫道：“HTML 導(dǎo)向的 Web 開發(fā)范式被拋棄，不是因為超文本是個壞主意，而是因為 HTML 沒有足夠的表達(dá)能力。htmx 旨在解決這個問題，并讓你可以使用 Web 的原始超文本模型實現(xiàn)許多常見的現(xiàn)代 Web UI 模式。”

Htmx 現(xiàn)在支持包括異步請求、CSS 轉(zhuǎn)換和使用 HTML 屬性的 WebSocket 通信在內(nèi)的特性。

盡管 Htmx 仍然不如 React 或 Angular 等框架那么出名，但它還是收獲了開發(fā)人員的贊賞。之前就有人提到，“我絞盡腦汁想找出一個沒有過度設(shè)計的 js 框架，找到 htmx 讓我非常高興”。另一個人則表示“Htmx 簡直太棒了。我們正用它來完成一個重大項目。”

Gross 參與了 Hacker News 上的討論并回答了問題。有人問他，是否在設(shè)法將 Htmx 的一些特性推向 HTML 標(biāo)準(zhǔn)？“我們正在與 Chrome 開發(fā)人員討論這些想法，我持謹(jǐn)慎樂觀的態(tài)度”，Gross 說。

Htmx 使用的是 XMLHttpRequest，而非更新、更強大的 fetch API。有人問，團(tuán)隊是否考慮過改用 fetch？“看過了，不幸的是 fetch() 和 xhr 有一組不相交的特性（特別是 xhr 的上傳進(jìn)度），所以我們決定不碰它”，Gross 回答道。

該項目在 GitHub 上根據(jù) Zero-Clause BSD 許可開源。

原文鏈接：

https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javascript-frameworks-with-easily-understood-html-attributes/

聲明：本文為 InfoQ 翻譯，未經(jīng)許可禁止轉(zhuǎn)載。

原文鏈接：Htmx 2.0 發(fā)布：用易懂的 HTML 屬性取代復(fù)雜 JavaScript 框架_架構(gòu)_InfoQ精選文章

端工程師在創(chuàng)建web應(yīng)用時一般都會選擇合適當(dāng)前項目的框架，目前JavaScript開發(fā)中有幾十種常用框架可以選擇，基本都是大同小異，但我們更應(yīng)該選擇開發(fā)者受歡迎的，而且有在維護(hù)已成熟不斷更新技術(shù)的框架。

第一個是最基礎(chǔ)，受初學(xué)者喜愛的Bootstrap，Bootstrap 是全球最受歡迎的前端組件庫，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目，框架本身已經(jīng)裝有強大的 jQuery 插件，開發(fā)者直接使用即可。目前已經(jīng)更新Bootstrap4，當(dāng)然我們推薦先使用成熟的Bootstrap3。

第二個jQuery是JavaScript最古老框架之一，它是JavaScript的壓縮版，整合JavaScript最常用的功能，寫得少，做得多，目前市場上的網(wǎng)站前端都使用到j(luò)Query。

jQuery對DOM的操作非常容易，提高AJAX（異步 JavaScript 和 XML）方便使用，即后臺加載數(shù)據(jù)無需重新加載整個頁面。jQuery支持目前所以流行瀏覽器，跨瀏覽器支持特性很強。

jQuery中文社區(qū)很成熟，學(xué)習(xí)很方便，目前開發(fā)者一直不斷貢獻(xiàn)，已經(jīng)發(fā)展14年的它不會被開發(fā)者忘記。

第三個Vue是UI開源的JavaScript 框架，Vue數(shù)據(jù)體積很小，正常20k左右。Vue.js與DOM數(shù)據(jù)綁定，渲染函數(shù)的模板。目前開發(fā)文檔也很簡單易懂，你隨時可用根據(jù)文檔寫出自己第一個Vue頁面。

第四個NodeJS，很多人稱為前端后臺框架，Node.js 是一個基于 Google Chrome 的 JavaScript 引擎構(gòu)建的開源服務(wù)器端平臺，所以我們NodeJS使用編程后臺數(shù)據(jù)邏輯，包括操作數(shù)據(jù)庫等功能。

Node.js 庫的所有API都是異步的，即非阻塞的。利用這個特點我們在使用異步功能時，服務(wù)器永遠(yuǎn)不會等待 API 返回數(shù)據(jù)，服務(wù)器在調(diào)用一個API之后直接移動到下一個 API。

Node.js還有一個特點是使用帶有事件循環(huán)的單線程模型，Node.js 使用的單線程可以有更多的請求服務(wù)。

第五個AngularJS是目前JavaScript最強大、最高效的 JavaScript 框架之一。

AngularJS是 MVC 架構(gòu)（模型、視圖和控制器），給開發(fā)者提供高效的邏輯。

AngularJS 通可以過指令擴(kuò)展了HTML，且通過表達(dá)式綁定數(shù)據(jù)到 HTML頁面。

以上五個前端JavaScript框架是目前受歡迎使用的框架。