Repolode
提交项目
vladocar

vladocar/Sumi.css

极简的 CSS 框架，无需添加类名即可美化语义化 HTML，单文件、无需构建。

在 GitHub 查看官网
Star
128
Fork
0
未关闭 Issue
2
最近提交
昨天

这是什么？

Sumi.css 是一个以「无类名优先」为理念的 CSS 框架。标题、表单、表格、卡片、折叠面板、对话框和导航等元素直接根据原生 HTML 标签完成样式，只有需要特定效果时才需要添加类名。它以单个文件发布，压缩并 gzip 后约 6.7 KB，不依赖 JavaScript，也没有其他依赖，可以直接下载使用，也可以通过 jsDelivr CDN 引入。

框架支持跟随系统设置的浅色与深色模式，并可通过 data-theme 属性强制指定模式。颜色、字体、尺寸和圆角均以 --s-前缀的 CSS 自定义属性暴露，既能全局修改，也能作用于单个元素。元素样式的优先级为零，自定义 CSS 无需使用 !important 即可覆盖。

此外，框架提供网格与弹性布局类、基于 aria-invalid 的表单校验状态、加载动画、工具提示以及流式字号体系。项目附带组件文档页和分步教程，支持 Chrome、Edge、Firefox 和 Safari 的当前版本。

核心功能

  • 01无需类名即可美化原生语义化 HTML 元素。
  • 02单个 CSS 文件，无 JavaScript，无依赖。
  • 03自动跟随系统的浅色与深色模式，并可用 data-theme 强制切换。
  • 04通过 --s-前缀的 CSS 自定义属性进行主题定制。
  • 05元素样式优先级为零，自定义样式可直接覆盖。
  • 06提供网格、弹性布局和容器类。
  • 07支持焦点环、ARIA 状态和减少动画偏好等无障碍特性。

适用场景

  • 无需构建流程，快速为静态网站、文档页或个人主页添加样式。
  • 用较少的标记改动原型化表单或表格较多的内部工具。
  • 为已有手写 HTML 的项目统一外观并支持深色模式。
  • 基于共享的颜色与间距变量开发自定义组件。

快速上手

  1. 1

    将 sumi.min.css 下载到项目中

  2. 2

    在 HTML 的 head 中引入样式表，或从 jsDelivr CDN 加载

使用前须知

  • 依赖较新的 CSS 特性，较旧的浏览器中悬停和焦点颜色会更简单。

标签

#css#css-framework#classless#minimalist#dark-mode#theming#responsive-design#css-grid

常见问题

Sumi.css 是什么？
极简的 CSS 框架，无需添加类名即可美化语义化 HTML，单文件、无需构建。 Sumi.css 是一个以「无类名优先」为理念的 CSS 框架。标题、表单、表格、卡片、折叠面板、对话框和导航等元素直接根据原生 HTML 标签完成样式，只有需要特定效果时才需要添加类名。它以单个文件发布，压缩并 gzip 后约 6.7 KB，不依赖 JavaScript，也没有其他依赖，可以直接下载使用，也可以通过 jsDelivr CDN 引入。
Sumi.css 可以免费使用吗？用的什么许可证？
Sumi.css 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
Sumi.css 还在维护吗？
活跃维护中。Sumi.css 最近一次提交是在 2026年10月21日。
Sumi.css 适合用来做什么？
无需构建流程，快速为静态网站、文档页或个人主页添加样式。 用较少的标记改动原型化表单或表格较多的内部工具。 为已有手写 HTML 的项目统一外观并支持深色模式。 基于共享的颜色与间距变量开发自定义组件。
Sumi.css 怎么安装和运行？
将 sumi.min.css 下载到项目中 在 HTML 的 head 中引入样式表，或从 jsDelivr CDN 加载
在哪里获取 Sumi.css？
源代码和安装说明在 GitHub 上：https://github.com/vladocar/Sumi.css

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目