Logo

菜单

发布于 2026-01-06 0 阅读
0

比较无类 CSS 框架

比较无类 CSS 框架

作者：Shalitha Suranga ✏️

在互联网早期，大多数网页开发者都会编写自己的 CSS 样式表来构建和设计网页样式。如今，我们使用预先开发好的、功能齐全的 CSS 框架来完成这项工作，从而节省开发时间。但是，这些框架不会像 HTML 标签语义那样自动为 DOM 元素设置样式，因为它们是基于类的 CSS 框架。

相比之下，无类 CSS 框架不定义 CSS 类。它们会根据 HTML 标签的语义自动设置原始 HTML 结构的样式。例如，几乎所有无类框架都会为所有<button>标签应用相同的按钮样式。

在本文中，我将解释无类 CSS 框架的概念及其应用案例，并通过实时预览比较十个流行的无类 CSS 框架。

跳转到前面部分：

什么是无类 CSS 框架？

无类 CSS 框架是一种基于语义化 HTML 标签来设置 DOM 元素样式的 CSS 样式表。网页通常包含多种 HTML 元素类型，例如标题、列表、表格、段落和表单控件。

HTML 提供了多种标签来渲染这些元素，例如<table>用于创建表格的 `<table>` 标签。每个标签都指示最终 DOM 元素的显示方式——当我们使用 ` <table><table>` 标签时，我们就知道 Web 浏览器会渲染一个表格。

无类 CSS 框架无需使用预定义的类（例如基于类的框架），甚至无需编写任何 CSS 代码，即可立即为原始 HTML 页面添加样式。此外，无类框架还提供各种主题和 CSS 变量，以实现更好的自定义。

请看下面这个用于表格的无类 CSS 定义示例：



table {
   /* styles for tables */
}

th, td {
   /* styles for table headers and rows */
}
Enter fullscreen mode Exit fullscreen mode

我们将介绍的 CSS 框架会覆盖用户代理样式表定义的样式，并为所有标准 HTML 标签应用自定义样式。当您将无类 CSS 框架样式表导入到原始 HTML 页面时，最终会看到一个样式美观、现代的网页，因为无类框架会将样式应用到所有现有的标准 HTML 标签。

何时使用无类 CSS 框架

无类 CSS 框架的行为与功能齐全的基于类的 CSS 框架不同，后者提供各种预开发的组件和布局结构。无类框架仅定义了最少的样式，以便根据 HTML 标签名称和属性应用通用样式。

这使得这些库在需要立即为原始 HTML 设置样式而无需使用专用类或编写 CSS 源的场景中非常有用。以下是一些可以使用无类 CSS 框架的常见场景：

  • 为一个简单的博客网站添加样式，该网站渲染原始 HTML
  • 为传统的、静态的、纯 HTML 网页赋予现代感
  • 创建一个简单的作品集网站或个人网站
  • 为 Web 应用程序中Markdown渲染的 HTML内容添加样式
  • 原型设计（例如，为客户会议设计 HTML 表单）和最小可行产品 (MVP) 设计

无类 CSS 框架、轻类 CSS 框架和基于类的 CSS 框架

在介绍了无类 CSS 框架的概念及其最适合的应用场景之后，我们讨论了它们与传统基于类的框架的区别。然而，还有一种名为“类轻量级”（class-light）的 CSS 框架类型，它介于无类框架和基于类的框架之间。

轻类框架能够帮助你同时利用无类框架和基于类框架的特性来设计网页样式。它们不仅能够基于语义化的 HTML 概念来设置原始 HTML 页面的样式，还提供最少的类来构建布局和颜色。Chota和Milligram是流行的轻类 CSS 框架。

让我们在下表中比较这些类型的 CSS 框架：

比较因素 无阶级 轻型 基于阶级
提供预定义的类 不，但可能包含一些可选的实用程序类 与基于类别的类型相比，较少。 许多
是时候学习了 因为没有必修课，所以没什么新东西要学。 由于课程数量较少，所以课程也较少。 通常需要更多时间（复制粘贴预先编写的代码片段可以加快开发过程）
框架大小（影响性能——越小越好） 非常轻便 轻的 与其他两种类型相比，它并不轻便
组件（例如，对话框） 没有，或者只有少数基于语义 HTML 标签 极少，很少 功能齐全，许多
适用于 需要快速设置原始 HTML 样式的场景 极简网页设计，可扩展自定义样式 复杂的 Web 应用程序

十大无类 CSS 框架

让我们一起浏览几个流行、维护良好且高质量的无类 CSS 框架，并查看实时预览。我将使用这个原始 HTML 页面（取自[cbracco/html5-test-page此处应插入来源链接]）来演示所有即将介绍的无类框架，该页面会渲染每个语义化的 HTML 标签。我建议您同时在多个浏览器标签页中打开此原始 HTML 内容预览以及所有即将介绍的演示链接，以便更好地进行并排比较。

新的.css

New.css 演示 New.css是一个简单的无类 CSS 框架，提供三种内置主题：浅色、深色和终端主题。它提供多个 CSS 变量，用于构建自定义主题和自定义当前主题的配色方案。

安装

您可以通过您首选的Node包管理器安装此CSS框架：



npm install @exampledev/new.css
# --- or ---
yarn add @exampledev/new.css
Enter fullscreen mode Exit fullscreen mode

也可以从GitHub下载最新的样式表文件，或者按如下方式从 jsDeliver CDN 导入：



<link rel="stylesheet" href="https://cdn.jsDeliver.net/npm/@exampledev/new.css/new.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 New.css 是如何为我之前展示的原始 HTML 页面添加样式的。您也可以访问官方演示网站，并实时切换主题。

樱花

Sakura CSS 演示 Sakura是一个极简的无类 CSS 框架，使用 Sass 预处理器语言编写。它支持标准语义化 HTML 标签的样式设置，并提供七个预设主题。您可以轻松调整主题颜色，或使用 Sakura 的 CSS 变量构建自己的主题。

安装

您可以轻松地从GitHub下载最新样式表版本并将其链接到您的网页，或者按如下方式直接从 unpkg CDN 导入：



<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 Sakura 如何为我之前展示的原始 HTML 页面添加样式。您也可以访问官方演示网站，并实时切换主题。

缺少.css文件

Missing.css 演示 Missing.css是一个简洁的轻量级 CSS 框架，它同时提供无类和基于类的框架功能。由于它为每个常用的语义化 HTML 标签应用样式，并使用基于 CSS 变量的自定义方式，因此它的行为更接近于无类框架。

Missing.css 的类轻量级功能通过其辅助 CSS 类提供基于 Flexbox 的布局、网格和现代预样式组件，如警报、导航栏、图标按钮等。

安装

您可以轻松地从GitHub下载最新样式表版本并将其链接到您的网页，或者直接从 unpkg CDN 导入，如下所示：



<link rel="stylesheet" href="https://unpkg.com/missing.css/dist/missing.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 Missing.css 如何为我之前展示的原始 HTML 页面添加样式。您也可以访问官方演示网站，浏览各种示例页面。

Water.css

Water.css 演示 Water.css是一个现代化的无类 CSS 框架，提供浅色和深色主题。它还支持基于 CSS 变量的主题自定义，并具有一些额外的功能，例如超越传统语义化 HTML 的对话框支持。

安装

您可以轻松地从GitHub下载最新样式表版本并将其链接到您的网页，或者按如下方式直接从 jsDeliver CDN 导入：



<link rel="stylesheet" href="https://cdn.jsDeliver.net/npm/water.css/out/water.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

查看此 CodePen 示例，了解 Water.css 如何为我们的原始 HTML 示例页面添加样式。您还可以访问官方演示网站，并实时切换浅色和深色主题以查看示例 HTML 内容。

MVP.css

MVP.css 演示MVP.css无类 CSS 框架专为创建 Web MVP 而设计。它能够为大多数现代语义化 HTML 标签（例如 `<div>`<header>和 `<span> `）添加样式<section>，提供更好的移动视口支持，并提供 Web MVP 所需的所有基本组件。

MVP.css 还提供CSS 变量和深色主题，您可以将其与默认的浅色主题分开设置。

安装

您可以通过 Node 包管理器将 MVP.css 下载到您的 Web 项目中，方法如下：



npm install mvp.css
# --- or ---
yarn add mvp.css
Enter fullscreen mode Exit fullscreen mode

也可以从GitHub下载最新样式表版本，并将其链接到您的网页，或者直接从 unpkg CDN 导入，如下所示：



<link rel="stylesheet" href="https://unpkg.com/mvp.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 MVP.css 是如何为我之前展示的原始 HTML 页面添加样式的。您也可以访问官方演示网站，实时切换浅色和深色主题，查看示例 HTML 内容。

Pico.css

Pico.css 演示 Pico.css是一个极简的、无类 CSS 框架，它提供了一个专门的无类 CSS 样式表版本。它预置了浅色和深色主题，并提供了 CSS 变量，方便用户构建自定义配色方案。

Pico 为常用的语义化 HTML 标签添加了样式，并提供了一种使用纯语义化 HTML 创建对话框、节、手风琴、卡片、开关、工具提示和下拉菜单的方法。您可以使用 `<div>`、`<section>` 和 `<dropdown>` 标签，通过 CSS 类或不使用 CSS 类来构建<header>Web<main>布局<footer>。

安装

您可以通过 Node 包管理器将 Pico 下载到您的 Web 项目中，方法如下：



npm install @picocss/pico
# --- or ---
yarn add @picocss/pico
Enter fullscreen mode Exit fullscreen mode

对于 PHP 开发人员，Pico 也提供了一个 Composer 包：



composer require picocss/pico
Enter fullscreen mode Exit fullscreen mode

也可以从GitHub下载最新样式表版本，并将其链接到您的网页，或者直接从 jsDeliver CDN 导入，方法如下：



<link rel="stylesheet" href="https://cdn.jsDeliver.net/npm/@picocss/pico/css/pico.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 Pico.css 是如何为我之前展示的原始 HTML 页面添加样式的。您也可以访问官方演示网站，浏览几个使用 Pico 样式的示例网页。

Simple.css

Simple.css 演示 Simple.css是一个极简的无类 CSS 框架，它允许你使用几个 CSS 变量创建自定义配色方案。它不提供手动切换主题的功能，但会根据用户代理的配色方案配置自动设置深色主题。

安装

您可以通过 Node 包管理器将 Simple.css 下载到您的 Web 项目中，方法如下：



npm install simpledotcss
# --- or ---
yarn add simpledotcss
Enter fullscreen mode Exit fullscreen mode

此外，还可以从GitHub下载最新样式表版本并将其链接到您的网页，或者直接从 unpkg CDN 导入，如下所示：



<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 Simple.css 是如何为我之前展示的原始 HTML 页面添加样式的。您也可以访问官方演示网站，查看 Simple.css 是如何为语义化的 HTML 标签添加样式的。

默会

Tacit CSS 演示 Tacit是一个简洁的无类 CSS 框架，使用 Sass 预处理器语言编写。它以极简的方式为语义化的 HTML 标签添加样式，而不会对它们进行过多修改。Tacit 除了默认主题外，没有提供其他内置主题，但可以通过 CSS 变量轻松进行自定义。

安装

您可以从GitHub下载最新版本的样式表，并将其链接到您的网页，或者直接从 jsDeliver CDN 导入，方法如下：



<link rel="stylesheet" href="https://cdn.jsDeliver.net/gh/yegor256/tacit@gh-pages/tacit-css.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 Tacit 如何为我之前展示的原始 HTML 页面添加样式。您也可以访问官方演示网站，查看 Tacit 如何为语义化的 HTML 标签添加样式。

Almond.css

Almond.css 演示 Almond.css是一个使用 Sass 编写的无类 CSS 框架，它允许你使用基于 HSL 配色方案的自定义方式来设置语义化 HTML 标签的样式。它为两个框架版本提供了独立的样式表：通用版本带有图标，轻量版则不带图标。它没有内置主题，但你可以使用其 CSS 变量创建自定义主题。

安装

您可以通过 Node 包管理器将 Almond.css 下载到您的 Web 项目中，方法如下：



npm install almond.css
# --- or ---
yarn add almond.css
Enter fullscreen mode Exit fullscreen mode

也可以从GitHub下载最新样式表版本，并将其链接到您的网页，或者直接从 unpkg CDN 导入，如下所示：



<link rel="stylesheet" href="https://unpkg.com/almond.css/dist/almond.lite.min.css" />
Enter fullscreen mode Exit fullscreen mode

演示

请查看这个 CodePen 示例，了解 Almond.css 是如何为我之前展示的原始 HTML 页面添加样式的。您也可以访问官方演示网站，查看 Almond.css 是如何为语义化的 HTML 标签添加样式的。

Bolt.css

Bolt.css 演示 Bolt.css是一个简单的无类 CSS 框架，它提供了一些用于自定义配色方案的 CSS 变量。它不提供可切换的预设主题，但您可以使用 CSS 变量来调整预定义的配色方案。此外，Bolt 会自动应用深色配色方案。

安装

您可以通过 Node 包管理器将 Bolt.css 下载到您的 Web 项目中，方法如下：



npm install boltcss
# --- or ---
yarn add boltcss
Enter fullscreen mode Exit fullscreen mode

也可以从GitHub下载最新样式表版本，并将其链接到您的网页，或者直接从 unpkg CDN 导入，如下所示：




<link rel="stylesheet" href="https://unpkg.com/boltcss/bolt.min.css" />
Enter fullscreen mode Exit fullscreen mode




演示

请查看这个 CodePen 示例，了解 Bolt.css 是如何为我之前展示的原始 HTML 页面添加样式的。您也可以访问官方演示网站，查看 Bolt.css 是如何为语义化的 HTML 标签添加样式的。

无类 CSS 框架比较

让我们从各个比较因素对上述流行的无类框架进行比较：

比较因素 新的 樱花 丢失的 水 最有价值球员 微微 简单的 默会 杏仁 螺栓
精简后的框架大小（以千字节为单位，影响性能——越小越好） 4.68 2.68 36.85 22.14 6.58 71.85 8.54 5.49 13.86 7.71
浏览器支持 适用于所有现代浏览器（已弃用的IE v11可能会导致样式问题）
其他组件/控件（例如，对话框、开关等） 不 不 是的，请参阅组件：https://missing.style/docs/components/ 不 不 是的，请参阅组件：https://picocss.com/docs/accordions.html 不 不，但基本结构是可以实现的。 是的，请查看组件：https://alvaromontoro.github.io/almond.css/demo/ 不
布局支持 不 不 是的 不 是的 是的 不 不 不 不

基于以上比较因素，我们可以将每个框架归入以下三种用例类别之一：

使用类别 框架名称
适用于小型网站、博客、原型设计和渲染 Markdown 生成的 HTML 新、樱花、水、简单、默会、杏仁
网站MVP MVP、Missing 和 Pico
极简网页应用设计 微微

尽管我根据包大小和功能对无类框架进行了分类，但这并不意味着你不应该使用功能丰富的无类框架来增强小型网页或 Markdown 生成的 HTML 页面。几千字节的差异不会影响当前超高速网络和现代高性能计算机上的网页性能。

结论

本文研究了无类 CSS 框架的概念，并将其与其他基于类和轻类的框架进行了比较。我们讨论了十个流行的无类 CSS 框架，并提供了实时预览，同时从多个方面对它们进行了比较。

一些轻量级 CSS 框架，例如 Chota 和 Milligram，虽然被宣传为微型 CSS 框架，但它们也能为语义化的 HTML 添加样式，并且行为类似于无类 CSS 框架。您可以从这个GitHub 仓库浏览几乎所有开源的无类和轻量级 CSS 框架的最新列表。

本文讨论的顶级无类 CSS 框架可以为所有常用的语义化 HTML 标签添加样式，让您能够以美观的方式现代化原始 HTML——只需将样式表 CDN 链接复制粘贴到您的网页并预览即可。您可以使用这些框架的 CSS 变量轻松自定义样式。!important如果需要，您还可以使用标志覆盖默认样式。此外，您还可以使用标准的语义化 HTML 标签规范构建自己的无类框架。

你的前端是否占用了用户的 CPU 资源？

随着 Web 前端变得越来越复杂，资源消耗型功能也对浏览器提出了越来越高的要求。如果您希望监控和跟踪生产环境中所有用户的客户端 CPU 使用率、内存使用率等信息，不妨试试 LogRocket。

LogRocket 注册

LogRocket就像一个 Web 和移动应用的 DVR，它会记录 Web 应用、移动应用或网站中发生的一切。您无需猜测问题原因，即可汇总并报告关键的前端性能指标，重现用户会话和应用状态，记录网络请求，并自动显示所有错误。

革新 Web 和移动应用调试方式 —免费开始监控。

文章来源：https://dev.to/logrocket/comparing-classless-css-frameworks-3267
[PT-BR] 加入 SQL，何时...
我克隆了 Netflix，并加了点...