Automatic CSS在國外WordPress圈子是一款比較火的工具，特別是你如果有用bricks builder, Oxygen builder這樣的WordPress頁面構(gòu)建工具，這個工具幾乎無法避開討論的。搜遍了中文互聯(lián)網(wǎng)，似乎沒有找到什么文章來介紹這個工具的。也許是這個軟件太小眾，也許大家只是默默的在使用沒有說而已。寫下這篇文章記錄一下我從2021年11月份購買這個軟件，在開發(fā)者Kevin Geary的youtube頻道，內(nèi)部圈子不斷的學(xué)習(xí)教程下，自己WordPress建站的一些心路歷程。

什么是CSS framework（CSS框架）？

CSS 框架（framework）是一系列 CSS 文件的集合體，包含了基本的元素重置，頁面排版、網(wǎng)格布局、表單樣式、通用規(guī)則等代碼塊,用于簡化web前端開發(fā)的工作，提高工作效率。通俗的理解，它就像是超市里面賣的那種給你切好，搭配好的肉，菜一樣，你買回去就可以直接炒菜了，省去了你自己去處理的過程。

(資料圖片)

什么是Automatic CSS?

Automatic CSS是一款專門為WordPress生態(tài)編寫的一款CSS framework（CSS框架），能極大的提升建站時的工作效率和網(wǎng)站的統(tǒng)一性。官網(wǎng)：https://automaticcss.com/，目前已經(jīng)支持的編輯器有Oxygen builder, bricks builder。之后還會支持Wordpress默認(rèn)的Gutengburg和Zion builder，Cwicly，Generatepress等工具。注意是不支持市面上最流行的Elementor的。

Automatic CSS可以做什么？

我們知道使用科學(xué)的CSS框架， 會減少你的開發(fā)時間和提高效率，因為在平時的網(wǎng)站編寫設(shè)計中總會遇到很多重復(fù)使用的代碼參數(shù)。

Automatic CSS就是一款這樣的工具，其預(yù)設(shè)好的CSS可以幫助你：

自動文字大小

Automatic.css 支持的網(wǎng)站上包含文本的任何內(nèi)容，無論是標(biāo)題、段落、列表、表單字段還是其他任何內(nèi)容，都通過 12 種不同的大小選項遵循完美的數(shù)學(xué)等級層次結(jié)構(gòu)，在不同的顯示分辨率下自動調(diào)整字體的大小。平時一般我們設(shè)置比如把桌面端分辨率下下字體設(shè)置成16px，平板和手機端如果不單獨設(shè)置都會顯示16px大小，如果要在這兩段顯示不同的字體大小就必須單獨在對應(yīng)的分辨率下去設(shè)置。同過Automatic.css的自定義css，如 text-m，實際上你已經(jīng)得到了一個在不同分辨率下自動調(diào)整大小的字體設(shè)置。如下圖所示，字體會從14px到16px去自動調(diào)節(jié)，大屏幕字體大，小屏幕字體小。

Automatic.css后臺字體設(shè)置界面 Automatic.css后臺字體設(shè)置界面

自動顏色

設(shè)你您的品牌顏色，Automatic.css 會自動生成每種顏色的六種色調(diào)變體。 你能夠使用這些變體為任何元素（包括背景和覆蓋）著色，您甚至可以通過 Automatic.css 顏色實用程序變量將它們與自定義類和 ID 一起使用。

Primary color：設(shè)置網(wǎng)站的主色調(diào)。
Secondary color：設(shè)置第二顏色，提示顏色。
Accent color：強調(diào)性顏色，可用來做CTA按鈕等。
Action color: 行動性顏色，可用來做CTA按鈕等。
。。。

Automatic.css后臺顏色設(shè)置界面 Automatic.css后臺顏色設(shè)置界面

相對于直接設(shè)置顏色代碼，通過設(shè)置變量的方式可以很好的保持設(shè)計的延續(xù)性和一致性，也可以避免每次都要輸入記住一堆沒有意義代碼的麻煩。另一個好處是如果你會將這個網(wǎng)站移植到新的站點，可以及其方便的一鍵更換網(wǎng)站色調(diào)。

2023-4-10更新：在使用了這么久時間建了很多站點之后我個人的習(xí)慣是會把平時用不上的顏色給關(guān)掉，這樣就不會在css里面加載那些一直都用不上的代碼了。對我而言，基本上action color加上shade的組合大部分時間里面已經(jīng)足夠了。P.S. shade color默認(rèn)是無法關(guān)閉的。

自動邊距

與 Automatic.css 中的排版一樣，邊距、填充和間隙都遵循完美的數(shù)學(xué)比例，讓您可以訪問六個層次間距值和六個層次部分間距值，所有這些都是自動響應(yīng)的。 此外，間距實用程序變量確保即使是完全自定義的元素也具有一致的間距。

自適應(yīng)不同的設(shè)備

Automatic.css 使用先進(jìn)的 CSS Clamp 和 Calc 技術(shù)來確保所有版式、邊距、填充和間隙都根據(jù)您網(wǎng)站的最大和最小視口尺寸完美響應(yīng)。 即使您自定義系統(tǒng)以適應(yīng)特定的設(shè)計和布局，您也不必擺弄斷點。

clamp()函數(shù) clamp()函數(shù)

自動Grid布局

Automatic.css 是第一個提供自動響應(yīng)網(wǎng)格的實用程序框架。 在桌面上設(shè)置所需的列數(shù)，Automatic.css 處理其余部分。 對于喜歡在每個斷點處完全控制其網(wǎng)格的開發(fā)人員，Automatic.css 通過傳統(tǒng)的網(wǎng)格實用程序類提供完全控制。

ACSS grid布局 ACSS grid布局

如上圖所示，grid–3代表在桌面分辨率下是三個網(wǎng)格，grid–l-2代表在平板模式下變成2個網(wǎng)格，grid–m-1代表在手機分辨率下一個網(wǎng)格，gap–m代表網(wǎng)格的間距。

高度可自定義

認(rèn)為全自動框架會鎖定您在每個站點上使用相同的值？ Automatic.css 為您提供對排版、間距和顏色的驚人精細(xì)控制，因此您可以快速從 Figma、Sketch 和 XD 重新創(chuàng)建設(shè)計而不會出現(xiàn)問題。

ACSS強大的自定義功能 ACSS強大的自定義功能

自動回退機制（fallback）

并非所有瀏覽器都支持 Clamp 和 Calc 函數(shù)，它們是 Automatic.css 響應(yīng)特性的核心。 不過不用擔(dān)心，因為 Automatic.css 對于不支持 Clamp 的瀏覽器使用 Calc 具有近乎完美的回退，而對于不支持 Calc 的瀏覽器使用 rem 或 px 的“純”回退。

關(guān)鍵詞：