Sumi.css 是一款极简的 CSS 框架,以无类名为先。编写普通的语义化 HTML,页面即可呈现完整的样式。只有在需要特定效果时才添加类名。该框架以单个文件发布,无需构建步骤,压缩并 gzip 后仅 6.7 KB,不使用 JavaScript,也没有任何依赖。
默认无类名模式下,Sumi 仅通过 HTML 元素本身即可为标题、表单、表格、卡片、手风琴、模态框和导航设置样式。它支持浅色和深色模式,并自动跟随访问者的系统设置;开发者也可以使用 data-theme 强制指定任一模式。
主题定制非常简单。每种颜色、字体、尺寸和圆角都是 CSS 自定义属性。元素样式的特异性为零,因此你自己编写的 CSS 无需使用 !important 即可生效。
无障碍功能内置于框架中,包括清晰可见的焦点环、由 ARIA 驱动的状态(如 aria-invalid、aria-busy 和 aria-current),并支持减少动效设置。开发者可以将 sumi.min.css 复制到项目中安装 Sumi,也可以通过 jsDelivr 从代码仓库加载。开发期间可使用未压缩的 sumi.css,其中附有解释每个部分的注释。
来源: Hacker News · 由HeadlinesBriefing整理摘要