同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 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 元素标签来做界面｜那些免费的砖

者 | Tim Anderson

译者 | 王强

策划 | Tina

AI 大模型超全落地场景&金融应用实践，8 月 16 - 19 日 FCon x AICon 大会联诀来袭、干货翻倍！

用于扩展 HTML 规范的 Htmx 项目发布了 2.0 版，这是该项目自 2020 年 11 月 发布 1.0 版以来的第一个主要版本。

Htmx 2.0 取消了对 Internet Explorer 的支持，并将扩展项移出了核心存储库，这样每个扩展都可以按照自己的节奏发布更新了。新版本还删除了一些已弃用的属性，并将 HTTP DELETE 请求更改为使用参数。

新版还加入了一些新特性，包括 htmx.swap() 方法，该方法用新内容替换现有内容。它替换并改进了现有的内部 selectAndSwap() 方法。新版还改进了与 Web 组件、可重复使用的自定义元素的集成。

新版发布博文解释说，为了避免破坏现有项目，1.x 版本将在 NPM（节点包管理器）中继续标注为为“latest”，2.x 还是“next”，直到 2025 年 1 月 1 日为止。迁移到 2.0 版并不困难，但根据迁移指南，用户可能需要做一些工作。

Htmx 是一种新的前端开发方法，侧重于 HTML 而非 JavaScript（尽管它是作为 JavaScript 库实现的）。Htmx 是从之前的一个项目 intercooler.js 发展而来的，后者是由 Htmx 发明者 Carson Gross 于 2013 年创建。这两个项目的灵感都来自于这样一种观点：HTML 的特性一直因为行业对 JavaScript 框架的关注而被限制住了，而 JavaScript 框架的复杂性却一直在增长。Gross 在 2020 年推出 1.0 版时写道：“HTML 导向的 Web 开发范式被抛弃，不是因为超文本是个坏主意，而是因为 HTML 没有足够的表达能力。htmx 旨在解决这个问题，并让你可以使用 Web 的原始超文本模型实现许多常见的现代 Web UI 模式。”

Htmx 现在支持包括异步请求、CSS 转换和使用 HTML 属性的 WebSocket 通信在内的特性。

尽管 Htmx 仍然不如 React 或 Angular 等框架那么出名，但它还是收获了开发人员的赞赏。之前就有人提到，“我绞尽脑汁想找出一个没有过度设计的 js 框架，找到 htmx 让我非常高兴”。另一个人则表示“Htmx 简直太棒了。我们正用它来完成一个重大项目。”

Gross 参与了 Hacker News 上的讨论并回答了问题。有人问他，是否在设法将 Htmx 的一些特性推向 HTML 标准？“我们正在与 Chrome 开发人员讨论这些想法，我持谨慎乐观的态度”，Gross 说。

Htmx 使用的是 XMLHttpRequest，而非更新、更强大的 fetch API。有人问，团队是否考虑过改用 fetch？“看过了，不幸的是 fetch() 和 xhr 有一组不相交的特性（特别是 xhr 的上传进度），所以我们决定不碰它”，Gross 回答道。

该项目在 GitHub 上根据 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 翻译，未经许可禁止转载。

原文链接：Htmx 2.0 发布：用易懂的 HTML 属性取代复杂 JavaScript 框架_架构_InfoQ精选文章

端工程师在创建web应用时一般都会选择合适当前项目的框架，目前JavaScript开发中有几十种常用框架可以选择，基本都是大同小异，但我们更应该选择开发者受欢迎的，而且有在维护已成熟不断更新技术的框架。

第一个是最基础，受初学者喜爱的Bootstrap，Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目，框架本身已经装有强大的 jQuery 插件，开发者直接使用即可。目前已经更新Bootstrap4，当然我们推荐先使用成熟的Bootstrap3。

第二个jQuery是JavaScript最古老框架之一，它是JavaScript的压缩版，整合JavaScript最常用的功能，写得少，做得多，目前市场上的网站前端都使用到jQuery。

jQuery对DOM的操作非常容易，提高AJAX（异步 JavaScript 和 XML）方便使用，即后台加载数据无需重新加载整个页面。jQuery支持目前所以流行浏览器，跨浏览器支持特性很强。

jQuery中文社区很成熟，学习很方便，目前开发者一直不断贡献，已经发展14年的它不会被开发者忘记。

第三个Vue是UI开源的JavaScript 框架，Vue数据体积很小，正常20k左右。Vue.js与DOM数据绑定，渲染函数的模板。目前开发文档也很简单易懂，你随时可用根据文档写出自己第一个Vue页面。

第四个NodeJS，很多人称为前端后台框架，Node.js 是一个基于 Google Chrome 的 JavaScript 引擎构建的开源服务器端平台，所以我们NodeJS使用编程后台数据逻辑，包括操作数据库等功能。

Node.js 库的所有API都是异步的，即非阻塞的。利用这个特点我们在使用异步功能时，服务器永远不会等待 API 返回数据，服务器在调用一个API之后直接移动到下一个 API。

Node.js还有一个特点是使用带有事件循环的单线程模型，Node.js 使用的单线程可以有更多的请求服务。

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

AngularJS是 MVC 架构（模型、视图和控制器），给开发者提供高效的逻辑。

AngularJS 通可以过指令扩展了HTML，且通过表达式绑定数据到 HTML页面。

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