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

什么是CSS framework（CSS框架）？

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

(資料圖片)

什么是Automatic CSS?

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

Automatic CSS可以做什么？

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

Automatic CSS就是一款這樣的工具，其預設好的CSS可以幫助你：

自動文字大小

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

Automatic.css后臺字體設置界面 Automatic.css后臺字體設置界面

自動顏色

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

Primary color：設置網站的主色調。
Secondary color：設置第二顏色，提示顏色。
Accent color：強調性顏色，可用來做CTA按鈕等。
Action color: 行動性顏色，可用來做CTA按鈕等。
。。。

Automatic.css后臺顏色設置界面 Automatic.css后臺顏色設置界面

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

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

自動邊距

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

自適應不同的設備

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

clamp()函數 clamp()函數

自動Grid布局

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

ACSS grid布局 ACSS grid布局

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

高度可自定義

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

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

自動回退機制（fallback）

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

關鍵詞：