不同浏览器对网页默认组件的解析风格不一致，不够美观。开发网页样式需要花费大量时间。今天给大家介绍一个优雅的CSS框架。关于Pico.cssPico.css是一个简单轻量级的CSSUI框架。最大的特点是样式是基于HMTL原有的标签名称和内置属性。更少或没有类用于定义样式。编写的代码语义清晰，可维护性强，可以帮助开发者构建自己的UI系统，也可以直接用于快速的小型项目。截至发布之日，Pico.css在Github上的Star数已达3898颗。Pico.css框架具有解密和本机语义代码。pico.css尽可能使用原生HTML元素的标签名来定义样式，整个框架使用的类名不到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版本。这个版本没有单一的类，完全使用元素标签名和属性来写网页。使用Pico.css的原因项目中使用Pico.css来源于一个快速营销页面的需求。需要做几个简单的有输入交互的页面。使用像bootstrap这样庞大的框架显然有点麻烦。如果使用当前流行的可以按需引入的VueUI组件库，必然需要用Vue.js进行工程化。做几个简单的页面就可以了，没必要用中大型项目的标准配置。考虑到市面上大部分的UI框架都是过度封装，堆放了很多语义各异的类名，不仅会拖慢页面加载速度，还会导致样式计算时间变长，最后找到了Pico.css适合这种场景。css样式的写法非常自由。目前有一种前端开发的趋势。为了做一个漂亮的界面，写样式要花很多时间。为了让样式可以复用，我绞尽脑汁给类命名，网上什至有各种类。命名约定，可能会导致大量样式被覆盖。很多时候类属性的名称甚至比样式的代码还要多，维护起来极其困难。Pico.css的出现为这种发展现状提供了一种新的思路，不仅可以直接在实际项目中使用，还可以作为构建自己的UI库的基础样式。免费开源说明Pico.css是一个免费的开源项目。源代码基于MIT开源协议托管在Github上。任何个人或公司都可以免费下载和使用。相关网址：https://www.thosefree.com/pic...
