同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 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，感兴趣的开发者也可以前往了解。

关注我，持续分享高质量的免费开源、免费商用的资源。

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