共计 1447 个字符，预计需要花费 4 分钟才能阅读完成。
不同浏览器对网页默认的组件解析款式不统一，而且不够好看，网页款式开发须要大量工夫，明天介绍一款优雅的 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 上，任何集体和公司都能够收费下载应用。
相干网址：https://www.thosefree.com/pic…