WordPress 中共享 CSS 工具包的案例

the-case-for-a-shared-css-toolkit-in-wordpress WordPress 中共享 CSS 工具包的案例

今天早些時候,Mark Root-Wiley 發表了一篇深入的 圍繞標準化設計令牌和 CSS 的提案 對於 WordPress。 目標是圍繞核心設計工具創建一個一致的、可定製的和可互操作的系統。 本質上,他提出了一個標準化的設計框架,或者,正如他所提到的,一個 WordPress、主題和插件可以依賴的「共享 CSS 工具包」。

博客文章的字數接近 4,000 字。 他還添加了一個較短的版本 通過 Gutenberg GitHub 票提出建議. 然而,這篇文章擴展了這個想法,鏈接到跨越幾年的資源。

我通過電子郵件回復了 Root-Wiley。 這對我來說是一個近在咫尺的話題。 在過去的幾年裡,我有幸與之交談的其他主題作者也對此感到沮喪。 這些是從第一天起就 100% 支持區塊系統的人,而不是在後面大喊「古騰堡糟透了!」的隨機人。

我分享的主要想法是,在這個話題上有點疲勞。 每隔一段時間就會推動將標準預設帶入核心。 但是,總感覺車輪在泥濘中打轉,直到每個人都下車才意識到它沒有動。

Root-Wiley 指出我 2019 年的帖子, 未來的主題:設計框架和主主題,作為共同的祖先,他深入探討了這個問題。 但是,甚至在 WordPress 5.0 中的塊編輯器推出之前,我和其他人就一直在談論它。

部分原因是我們對更多標準化的潛力感到興奮。 WordPress 終於可以糾正它的一些長期存在的問題,並開創一個基於精心設計的慣例的主題創作烏托邦時代。

WordPress 5.0 推出了自定義字體大小和調色板的主題支持標誌。 這些功能本身是可喜的第一步,但還遠遠不夠。 WordPress 應該從一開始就跨越並設定標準。

相反,我們得到了默認字體大小和顏色名稱的混搭,沒有說明它們的含義。 「巨大」的字體大小有多大? 如果我需要遵循該命名方案並需要更大的東西怎麼辦? 我應該給它取什麼名字? (有關尺碼名稱的潛在教育意義,請參閱我的 這篇文章末尾的注釋.)

每次看到像 .has-luminous-vivid-orange-background-color 這樣的類時,我仍然感到畏縮。

但是,我不會繼續抨擊平台過去的錯誤。 是時候向前看了。 Root-Wiley 在他的帖子中指出:

我想提出一條標準化 WordPress 設計和布局的 CSS 創建方式的路徑,使它們更加透明、高效和可定製。 這種方法不僅可以簡化核心樣式,還可以解決一些長期存在的 WordPress 痛點,這些痛點甚至早於 WordPress 5.0 中塊編輯器的發布。

我想查看用戶可以通過塊設計工具選擇的所有內容的預設。 例如,他們可以從 WordPress 和/或其主題中選擇預定義的大小,而不是設置邊距的絕對單位。 但是,應該有命名這些預設的標準。

為什麼這個這麼重要? 想像一下,在某篇博文中將一個塊的上邊距設置為 20 像素。 它看起來不錯並且符合您當前的主題,並且您在各種元素上重複此過程數十次或更多次。 然後,你在路上改變設計。 這可以是完整的主題切換或通過全局樣式系統進行的更改。 這種新設計實現了不同的垂直間距系統。 24px 可能比在整個網站上亂扔的 20px 更有意義。

舊設置將與理想世界中的全球價值聯繫在一起,而不是與街區聯繫在一起。 這將允許它匹配任何現有的設計系統。

邊距只是一個更大的難題的一部分。 而且,各種設計工具的預設甚至沒有涵蓋 Root-Wiley 提案中的所有內容。 這就是為什麼我鼓勵所有主題和插件作者審查它。

我不同意提案中的一些項目。 但是,這些涉及低級實施工作,而不是創建標準化系統的概念。 我曾計劃詳細討論這些內容,但這樣做會陷入與我共事的前團隊成員所說的「雜草討論」中。 他們妨礙了大局。

如果 Root-Wiley 和我同意一件事,那就是創建 CSS 工具包以將 WordPress 帶入未來的大局。

從未發布過的尺碼列表

這有點切題,但我確實按照 WordPress 字體大小模型對大小名稱進行了大量研究。 而且,因為我可能永遠不會有理由在其他地方發表我的發現,我不妨把它們貼在這裡。

如果您想知道哪些特定尺寸比其他尺寸更大或更小(例如,巨型與泰坦尼克號),我向您提供一個受過教育但可能不是 100% 正確的列表:

  • 小型 (2XS)
  • 小(XS)
  • 小的
  • 普通(中、普通、基礎)
  • 特大號 (XL)
  • 巨大(2XL)
  • 巨型 (3XL)
  • 巨大(4XL)
  • 泰坦尼克號 (5XL)
  • 奧林匹克 (6XL)
  • 行星(7XL)
  • 銀河 (8XL)
  • 通用 (9XL)

這可能不是一個詳盡的列表,但我花了幾個星期查找和比較定義和資源。 我在混合中添加了一些替代品以供參考。

我還想發布這個來展示命名事物如何破壞用戶體驗。 普通用戶不必考慮最大或最小的尺寸。 像這樣的命名系統會造成混亂。 即使用戶體驗有效,基於代碼的 slug 也不應該讓開發人員感到困惑。

同樣的規則適用於顏色和所有其他預設。 命名很難,但當你已經把事情弄得一團糟並且需要稍後修復時,就更難了。 它從基礎開始,尤其是當今天添加的所有內容都將成為未來幾年遺留代碼集的一部分時。

資源

Total
0
Shares
相關文章