我們為什麼不使用CSS框架

在最近一次 ReactiveConf 會議上，Scott Tolinski 為這樣一種觀點做了辯護：考慮到 CSS 語言最近增加的東西，開發人員可能不再需要使用成熟的 CSS 框架。Tolinski 進一步演示了不需要支持 IE11 的開發人員如何利用 CSS 變量來實現一個自定義設計系統，而其開銷明顯小於使用框架。

CSS 變量 使開發人員可以表示生成目標佈局的 CSS 屬性之間的動態關係。CSS 變量，也稱為 CSS 自定義屬性，是通過在它們的名字前面加上—（比如--background）來聲明的。CSS 變量有一個值，可以使用var()函數在其他 CSS 聲明中使用。變量可以通過 CSS 或 JavaScript 進行更新。當發生這樣的更新時，所有的因變量都會相應的更新。CSS 變量的作用域限定在聲明它們的元素上並參與級聯。

藉助顯式的、命名的、限定範圍的變量和用户定義的函數計算（var()），開發人員可以用更接近於圖靈完備語言（如 JavaScript）的方式表達自定義算法。雖然 CSS 最初被設計用來描述靜態數據（標記語言）而不是計算（編程語言），但是，由於需要採用一種經濟的方式描述佈局的動態變化，使得 CSS 越來越接近於一種常規編程語言，同時保持了其聲明性本質。

Tolinski 給出了一個具體的演示。該演示是對一個教程網站的完全重新設計，用户可以從六個主題中選擇一個，使用户界面的外觀發生相應的改變。實現該功能所需的 JavaScript 只包含對一個類的更改。例如，oled主題與oled-mode類關聯，該類配置了以下 CSS 變量：

.oled-mode {--bg-color: var (--darkPurp)--sheetHover: var (--black-20)--sheetTextColor: var (--white)...}

注意一下，在上述代碼中，變量（例如bg-color）如何從其他變量（例如darkPurp）計算出來，從而創建了一個顯式依賴的列表。相應的 CSS 代碼更容易維護：更容易更改，也更容易限定需要更改的內容。這裏，修改深紫色值將自動反映到所有需要修改的地方，而修改黑色肯定不會修改背景顏色。Tolinski 繼續説明 CSS 變量是如何幫助設計整個設計系統的。出於演講需要，Tolinski 將設計系統簡化為使該設計獨一無二的關鍵組件：顏色、類型、間距、字符、高度和元素（例如卡片或手風琴摺疊菜單）。

調色板可以用 CSS 變量進行編碼。例如，現有的工具可以從一些基本顏色和對比度目標生成自適應調色板。定義好顏色之後，Tolinski 繼續介紹他所説的顏色意向（例如--bgColor或lineCo lor）。

在排版方面，Tolinski 建議利用現有的工具來可視化字體及其比例。下面是一個由type-scale.com自動生成的用於複製粘貼的示例代碼：

@import url('https://fonts.googleapis.com/css?family=Poppins:400|Poppins:400');html {font-size: 100%;} /*16px*/body {background-color: white;font-family: 'Poppins', sans-serif;font-weight: 400;line-height: 1.65;color: #333;}p {margin-bottom: 1.15rem;}h1, h2, h3, h4, h5 {margin: 2.75rem 0 1.05rem;font-family: 'Poppins', sans-serif;font-weight: 400;line-height: 1.15;}h1 {margin-top: 0;font-size: 3.052em;}h2 {font-size: 2.441em;}h3 {font-size: 1.953em;}h4 {font-size: 1.563em;}h5 {font-size: 1.25em;}small, .text_small {font-size: 0.8em;}

接下來，Tolinski 使用 CSS 變量替換了生成的值：

--baseFontSize: 1rem--baseNavSize: 0.64rem...--xtra-big-ass-heading: 3.052rem--xtra-heading: 2.441rem...--heading-one: 1.953rem...--heading-four: var(--baseFontSize)--heading-five: var(--smallFontSize)...--headingFont: 'Poppins', sans-serif;--bodyFont: 'Raleway', sans-serif;...

附加的排版資源包括modularscale、Figma排版建議和vertical-rhythm-reset。Tolinski 建議使用margin-left或margin-right（margin-up或margin-down）來避免邊距重疊 的陷阱，但不能同時使用。

設計系統的下一個組件是元素，它是有樣式的組件，例如或

。元素應該簡單、明確、難以分開且可擴展。Tolinski在這裏推薦了類似於Heydon Pickering所提倡的技術，即封閉組件以通用的方式將佈局屬性強加於其子組件。例如，通用Stack佈局原語 通過元素之間共同的父元素在它們之間加入邊距，如下所示：

.stack > * + * {margin-top: 1.5rem;}

相關文章詳細介紹了這種模式的優點，並介紹了其他可以使用類似通配符的技術實現的通用佈局（例如側邊欄、Cover等）。最後，Tolinski 提出了以下建議：

ReactiveConf 是面向開發人員的年度會議，討論軟件開發的最新技術和趨勢。由於 Covid-19 的原因，ReactiveConf 2020 被推遲到 2021 年的前三個月。與此同時，演講亦會定期在網上播放。Tolinski 的演講已經在網上提供，其中有更多的例子和技術細節。

https://www.infoq.com/news/2020/06/css-variables-design-systems/

【來源：InfoQ】

聲明：轉載此文是出於傳遞更多信息之目的。若有來源標註錯誤或侵犯了您的合法權益，請作者持權屬證明與本網聯繫，我們將及時更正、刪除，謝謝。 郵箱地址：newmedia@xxcb.cn