我們為什麼不使用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 繼續介紹他所説的顏色意向(例如--bgColorlineCo 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-leftmargin-rightmargin-upmargin-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】

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

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 2885 字。

轉載請註明: 我們為什麼不使用CSS框架 - 楠木軒