语义 HTML 的最小 CSS 框架 Pico 为何能火?

zhezhongyun 2024-12-06 20:49 39 浏览

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 Pico

Pico 一个极简、轻量级的入门工具包，优先考虑语义语法，默认情况下使每个 HTML 元素响应灵敏且优雅，并自称是最小的 CSS 框架。

Minimal CSS Framework for Semantic HTML

随着 Pico v2.0 发布，Pico 具有更好的可访问性、更容易使用 SASS 进行自定义、完整的调色板、新的组件以及 20 个预编译颜色主题，总计超过 100 种可通过 CDN 访问的组合。

Pico 的典型特点包括：

轻量级和语义化：Pico 凭借简单性而蓬勃发展，直接设计 HTML 标签，总共使用不到 10 个 .class。同时，Pico 还为狂野的 HTML 纯粹主义者提供了无类版本。
使用纯 CSS 编写样式：这种情况，Pico 可以无缝支持，无需依赖项、包管理器、外部文件或 JavaScript，通过纯 HTML 标记实现优雅且简单的样式。
一切都保持响应式：在每台设备上都能轻松优雅， Pico 本身会根据屏幕宽度缩放字体大小和间距，从而在不同设备上呈现一致且优雅的外观，不需要额外的类或配置。
支持浅色或深色模式：Pico 提供两种开箱即用的中性配色方案，即浅色和深色，同时会自动适应用户偏好的颜色方案，而无需使用 JavaScript。
支持轻松定制：使用超过 130 个 CSS 变量自定义 Pico，或使用 SASS 进行更深层次的定制。支持在 20 多种颜色主题之间切换，并使用 30 多个模块化组件进行组合，以根据品牌的外观和感觉定制 UI。
优化的性能：与需要大量类覆盖和 JavaScript 的庞大且过于复杂的框架不同，Pico 使 HTML 保持精简，通过避免过多的 CSS 特异性来减少内存使用，并减少加载的文件。

目前 Pico 在 Github 通过 MIT 协议开源，有超过 11.8k 的 star、2k 的项目依赖量、50 + 代码贡献者，妥妥的前端优质开源项目。

2.如何使用 Pico

classless 版本

Pico 的 .classless 版本拥抱极简主义，这是偏爱简约方法的狂野 HTML 纯粹主义者的语义选项。在此版本中，<body> 内的 <header>、<main> 和 <footer> 充当定义居中或流体视口的容器。

/* Containers */
body > header,
body > main,
body > footer {
  ...
}

下面两种布局方式完全一样：

<!-- With pico.min.css -->
<body>
  <main class="container">
    <h1>Hello, world!</h1>
  </main>
</body>

<!-- With pico.classless.min.css -->
<body>
  <main>
    <h1>Hello, world!</h1>
  </main>
</body>

支持浅色或深色模式

Pico CSS 具有浅色和深色两种配色方案，可根据用户偏好自动启用:

section {
  background-color: var(--pico-background-color);
  color: var(--pico-color);
}

自适应

所有印刷元素都具有响应能力，并且可以跨设备和视口优雅地缩放。

支持自定义

使用 130 多个 CSS 变量自定义 Pico 的设计系统，以创建独特的外观和感觉。

Pico 包含许多自定义属性（变量），可以轻松访问常用值，例如：字体系列、字体大小、边框半径、边距、填充等。所有 CSS 变量都以 pico- 为前缀，以避免与其他 CSS 框架或自己的变量发生冲突。可以通过使用 SASS 重新编译 CSS 文件来删除或自定义此前缀。

可以在 :root 选择器中定义 CSS 变量以全局应用更改，或覆盖特定选择器上的 CSS 变量以在本地应用更改。

<style>
  :root {
    --pico-border-radius: 2rem;
    --pico-typography-spacing-vertical: 1.5rem;
    --pico-form-element-spacing-vertical: 1rem;
    --pico-form-element-spacing-horizontal: 1.25rem;
  }
  h1 {
    --pico-font-family: Pacifico, cursive;
    --pico-font-weight: 400;
    --pico-typography-spacing-vertical: 0.5rem;
  }
  button {
    --pico-font-weight: 700;
  }
</style>

更多关于Pico新特性可以参考文末的资料，本文不再过多展开。

参考资料

https://github.com/picocss/pico

https://athemes.com/collections/best-css-frameworks/

HTML 框架

上一篇：Web开发的十佳HTML5响应式框架
下一篇：HTML5教程从入门到精通，随堂笔记(一)HTML5框架结构

语义 HTML 的最小 CSS 框架 Pico 为何能火?

1.什么是 Pico

2.如何使用 Pico

classless 版本

支持浅色或深色模式

自适应

支持自定义

参考资料

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?