Ruby on Rails 快速前端使用零 CSS 作为无类 CSS 框架

本文与本系列之前的文章非常相似，但这次我们将使用一个新创建的优秀 CSS 框架 CSS Zero，它可以用于 "无需构建" 的项目或需要 "构建" 的 Ruby on Rails 应用。

需要注意的是，CSS Zero 框架的目标并非成为一个完全无类或轻量级无类框架。本文中建议的修改仅用于测试，旨在无需添加任何类的情况下为本教程的 HTML 页面中的所有元素设置样式。

因此，某些 HTML 元素的格式可能与 CSS Zero 框架建议的样式、设计、布局和行为不符。要查看 CSS Zero 框架的预期效果，请访问 CSS Zero 的 Lookbook：[此处添加 Lookbook 链接]。要查看其作为无类框架的运行效果，请按照以下步骤操作。

创建新的 Rails 应用

• rails new 命令之前的 time 用于显示命令执行的总时间。以下示例耗时 47 秒。

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

Rails 8 基于其“无需构建”的理念，默认使用 Propshaft 作为资源管道库，使用 Importmap 作为 JavaScript 库。Importmap 不执行任何 JavaScript 处理。

使用 VSCode 或您喜欢的编辑器打开项目

<code>$ cd classless-css-zero && code .</code>

创建一些页面来查看 HTML 元素的样式

页面位于本系列第一篇文章中的“常见步骤”部分。

将 CSS Zero 添加到您的项目

展开…

按照以下步骤将 CSS Zero 添加到您的项目：

<code>$ bundle add css-zero
$ bin/rails generate css_zero:install</code>

要查看可用的组件，请运行以下命令：

<code>$ bin/rails generate css_zero:add --help</code>

要添加所有组件，请运行以下命令：

<code>bin/rails generate css_zero:add accordion alert autoanimate autosave avatar badge breadcrumb button card carousel chart check_all combobox command collapsible datepicker dialog dropdown flash form fullscreen group hotkey input input_concerns inputmask layouts lightbox local_time navigation pagination progress prose sheet skeleton sortable switch table tabs trix upload_preview toggle web_share</code>

请注意，如果添加了其他组件或删除了某些组件，上述命令将失效。

第 1 部分 - 修改 app/assets/stylesheets/base.css 文件

展开…

在 Headings 链接中，我们可以看到许多样式化的元素需要包含在一个带有 `<div>` 的元素中。

<code><div>
  ...
</div></code>

为了在不使用 <div> 的情况下对这些 HTML 元素进行样式设置，我们将进行如下修改。

<code>body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;

  /* 无类配置测试 */
  font-size: var(--text-fluid-base);
  /* max-inline-size: 65ch; */

  /* 抗锯齿字体 */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-extrabold);
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.5em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}</code>

打开 app/assets/stylesheets/base.css 文件，找到 body { 行，并将复制的内容粘贴到 text-rendering: optimizeLegibility; 后面。粘贴后，删除或注释掉 max-inline-size: 65ch; 行。body 的内容应与上面的示例相同。

接下来，打开 app/assets/stylesheets/prose.css 文件，复制包含以下内容的部分：

<code>/* 无类配置测试 */
  h1 {
    font-size: 2.4em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.8em;
  }

  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }

  :is(b, strong) {
    font-weight: var(--font-bold);
  }

  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded);
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }

  code {
    padding: 0.1em 0.3em;
  }

  pre {
    border-radius: 0.5em;
    overflow-x: auto;
    padding: 0.5lh 2ch;
    text-wrap: nowrap;
  }

  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }

  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }

  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }

  blockquote p {
    hyphens: none;
  }

  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }

  th {
    font-weight: var(--font-bold);
  }

  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }

  th {
    border-block-end-width: 3px;
  }

  del {
    background-color: rgb(from var(--color-negative) r g b / .1);
    color: var(--color-negative);
  }

  ins {
    background-color: rgb(from var(--color-positive) r g b / .1);
    color: var(--color-positive);
  }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }

  mark {
    color: var(--color-text);
    background-color: var(--color-highlight);
  }</code>

将上述内容粘贴到 app/assets/stylesheets/base.css 文件的末尾。

第 2 部分 - 修改 app/assets/stylesheets/button.css 文件

展开…

修改 `.btn` CSS 类，使所有 HTML 按钮元素自动使用此样式。

将：

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-zero
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

更改为：

<code>$ cd classless-css-zero && code .</code>

第 3 部分 - 修改 app/assets/stylesheets/input.css 文件

展开…

修改 `.input` CSS 类，使所有 HTML 输入元素自动使用此样式。 类似地，修改 `.checkbox`, `.radio`, `.range` 选择器使其应用于所有对应的HTML标签。 具体修改方法与第二部分类似，请参照第二部分的修改方式进行。

调整 app/views/layouts/application.html.erb 文件

展开…

根据您在 `application.html.erb` 中放置测试 HTML 文件引用的位置，链接的显示方式会有所不同。如果您希望演示效果与教程相同，请修改相应部分。

现在，使用 CSS Zero 作为无类框架来设置 HTML 样式 ?

配置好 CSS Zero 并进行上述自定义后，启动 Rails 服务器，您将看到已设置样式的 HTML。

暗黑模式

某些样式具有暗黑模式选项。要确认这一点，请在电脑的色彩个性化设置中更改主题。在 Windows 中搜索“启用应用的暗黑模式”，并在暗黑模式和亮模式之间切换。更改操作系统设置后，HTML 页面应自动更改，表明它支持亮模式和暗模式。

后续步骤

[x] 根据您的喜好组织样式； [x] 使用项目中的 CSS 文件进行样式设置，不使用 CDN； [x] 使用 Tailwind 复制无类 CSS 框架的功能； [-] 使用 Rails Live Reload 在浏览器中动态更新项目中的更改； [-] 如果您想在前端上花费更多时间，请检查您喜欢的样式的自定义选项；

参考文献

• https://medium.com/@AntonShevchuk/classless-css-based-on-tailwind-57d4ef745c1f
• https://guides.rubyonrails.org/layouts_and_rendering.html
• https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98
• https://prismic.io/blog/best-css-frameworks
• https://saeedesmaili.com/notes/classless-css-libraries/
• https://dev.to/logrocket/comparing-classless-css-frameworks-3267
• https://github.com/dbohdan/classless-css
• https://github.com/troxler/awesome-css-frameworks