本文與本系列之前的文章非常相似，但這次我們將使用一個新創建的優秀 CSS 框架 CSS Zero，它可以用於 "無需構建" 的項目或需要 "構建" 的 Ruby on Rails 應用。
要注意的是，CSS Zero 框架的目標並非成為一個完全無類別或輕量級無類別框架。本文中建議的修改僅用於測試，旨在無需添加任何類別的情況下為本教程的 HTML 頁面中的所有元素設定樣式。
因此，某些 HTML 元素的格式可能與 CSS Zero 框架建議的樣式、設計、版面配置和行為不符。若要查看 CSS Zero 框架的預期效果，請造訪 CSS Zero 的 Lookbook：[此處新增 Lookbook 連結]。若要查看其作為無類別框架的運作效果，請依照下列步驟操作。
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 處理。
<code>$ cd classless-css-zero && code .</code>
頁面位於本系列第一篇文章中的「常見步驟」部分。
<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>
請注意，如果新增了其他元件或刪除了某些元件，上述指令將會失效。
app/assets/stylesheets/base.css 檔案<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 檔案的結尾。
app/assets/stylesheets/button.css 文件將：
<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>
app/assets/stylesheets/input.css 檔案app/views/layouts/application.html.erb 文件配置 CSS Zero 並進行上述自訂後，啟動 Rails 伺服器，您將看到已設定樣式的 HTML。
某些樣式具有暗黑模式選項。若要確認這一點，請在電腦的色彩個人化設定中變更主題。在 Windows 中搜尋“啟用應用程式的暗黑模式”，並在暗黑模式和亮模式之間切換。更改作業系統設定後，HTML 頁面應自動更改，表示它支援亮模式和暗模式。
[x] 依照您的喜好組織樣式； [x] 使用專案中的 CSS 檔案進行樣式設置，不使用 CDN； [x] 使用 Tailwind 複製無類 CSS 框架的功能； [-] 使用 Rails Live Reload 在瀏覽器中動態更新項目中的變更； [-] 如果您想在前端上花費更多時間，請檢查您喜歡的樣式的自訂選項；
以上是Ruby on Rails 快速前端使用零 CSS 作為無類別 CSS 框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！
