在我们的开发工作中，Pure CSS 是一个既轻量又具备响应式能力的 CSS 框架，它为我们提供了一套用于构建快速、响应式 Web 界面的 CSS 模块和实用工具。它的设计初衷是具备高度的可扩展性，从而允许我们轻松地定制网站或应用程序的外观和风格。使用 Pure 的一个显著好处是，它提供了一个经过多种浏览器测试的坚实 CSS 样式基础，这使我们无需为了实现跨浏览器兼容性而编写复杂的 CSS 规则。这不仅能节省时间和精力，还能确保用户在不同平台上获得一致的体验。
- 基于 SMACSS： SMACSS 代表“CSS 的可扩展和模块化架构”，它指导我们如何为 CSS 提供完美的结构。这能增加项目的灵活性和可扩展性。作为前端开发人员，我们在编写代码时应该始终遵循 SMACSS 原则。
- 类名约定： Pure CSS 遵循一种命名约定，其中每个模块都有一个标准类名用于模块内的通用规则，此外还有一个额外的类名，用于为特定的子模块展示特定规则。通常，所有类名都以 pure- 为前缀，这个前缀用于合并类名和样式。为了避免类名和样式之间的紧密耦合，我们通常会忽略描述性的类名；例如，与其写成 pure-form-horizontal，不如写成 pure-form-aligned。
- 使用 HTML 创建堆叠表单： pure-form 和 pure-form-stacked 是可以用来创建堆叠表单的类。下面展示了这两个类的语法：
语法：
- 使用 CSS 定义堆叠表单： CSS 包含两个用于表单的不同类，它们拥有表单和堆叠表单所需的所有通用规则。这些针对表单和堆叠表单的内置特定规则能让我们用更少的时间创建出实用的表单。
语法：
/* 在这里我们可以为特定的类添加我们自己的 CSS
以改变表单的样式 */
.pure-form { ... }
.pure-form-stacked { ... }
- 扩展 Pure： 当我们需要扩展 Pure CSS 时，必须遵循上述约定，以创建更具扩展性和灵活性的网页。要创建一种特定类型的表单，我们可以使用一个新的类 form-custom，它将利用 HTML 和 CSS 创建出不同风格的表单。
语法：HTML
语法：CSS
.form-custom { ... }
示例 1： 在这个例子中，我们创建了一个表单，需要提交用户的“名字”、“姓氏”和“城市”，并且在这个表单中，HTML 通过扩展 Pure CSS 来构建网页。这个网页使用了不同的类，例如 pure-form、pure-form-stacked 和 pure-button。
HTML
CODEBLOCK_97946794
输出：
示例 2： 在这个例子中，我们创建了一个表格，用于显示学生的“序号”、“姓名”、“部门”和“年份”，在这个网页中，HTML 扩展了 Pure CSS 以使用不同的类，例如 pure-table。
HTML
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css"
i