設(shè)計(jì)系統(tǒng)的CSS結(jié)構(gòu)

創(chuàng)新互聯(lián)大家提供一個(gè)高大上的技術(shù)：設(shè)計(jì)系統(tǒng)的CSS結(jié)構(gòu)。內(nèi)容如下：

我們剛剛給一個(gè)大型機(jī)構(gòu)搭建了一個(gè)設(shè)計(jì)系統(tǒng)并且創(chuàng)建了一個(gè)讓我們十分滿意的CSS架構(gòu)。這是第一次，我們?cè)谧詈笃谙耷巴瓿扇蝿?wù)，并且沒有希望我做一些不同的東西。因此，我認(rèn)為這是一個(gè)非常好的分享機(jī)會(huì)，告訴大家我們?nèi)绾未罱ㄏ到y(tǒng)CSS架構(gòu)的。

給項(xiàng)目一點(diǎn)背景，我們開始搭建一個(gè)設(shè)計(jì)系統(tǒng)和樣式指導(dǎo)，為了滿足組織中成千上百的開發(fā)者，采用大量技術(shù)來創(chuàng)建它們超過500個(gè)內(nèi)部web應(yīng)用。

組織中的大量的開發(fā)者都專注與應(yīng)用編程，數(shù)據(jù)和邏輯，不專注與前端開發(fā)。因?yàn)樗麄兊拈_發(fā)時(shí)間很緊張，開發(fā)者需要完成他們的app并且快速上線，他們經(jīng)常簡(jiǎn)單地復(fù)制粘貼來自其他應(yīng)用前端的代碼或者使用框架，像用Bootstrap來完成UI的工作。就像你想的那樣，這樣積累的結(jié)果就是這些行為讓，本來就不一致的前端體驗(yàn)變成了大雜燴。當(dāng)然這就是我們想要拯救的，通過搭建組織結(jié)構(gòu)，他們自己的周到的、穩(wěn)健的UI設(shè)計(jì)系統(tǒng)。

搭建CSS法則

在項(xiàng)目開始的時(shí)候，我們談?wù)摿碎_發(fā)者關(guān)于他們的流程和痛點(diǎn)，并問他們的接口設(shè)計(jì)系統(tǒng)如何讓他們的工作量變簡(jiǎn)單。

完成我的前端指導(dǎo)問卷，這些導(dǎo)致一系列前端規(guī)則和系統(tǒng)封裝。這里有些我們創(chuàng)建的CSS具體規(guī)則。

• 模塊化 —— 設(shè)計(jì)系統(tǒng)在每一個(gè)方面都是模塊，這是非常實(shí)用寫CSS的方法。這在組件之間需要清晰分隔。
• 可讀性是關(guān)鍵 ——開發(fā)者必須在第一眼理解CSS代碼，并且理解每一個(gè)選擇器的目的。
• 清晰勝過簡(jiǎn)潔 —— 設(shè)計(jì)系統(tǒng)有時(shí)候看上去很冗長(zhǎng)，但是作為交換，它提供清晰和韌性。保持CSS可讀性和可擴(kuò)展性意味著犧牲簡(jiǎn)潔的語法。
• 保持平面化 —— 長(zhǎng)的選擇器要回避，無論什么地方，盡可能保持CSS獨(dú)立DOM和模塊化。
• 避免沖突 —— 因?yàn)榻M件會(huì)部署許多不同的應(yīng)用，保證設(shè)計(jì)系統(tǒng)之間的CSS不會(huì)和其他的庫(kù)和系統(tǒng)有沖突，這很重要。通過系統(tǒng)空間命名Class名可以完成這個(gè)，更多的會(huì)在之后描述。

從這些規(guī)則中，我們搭建了制約和語法，包含了這些規(guī)則，以滿足開發(fā)者的需求。這里有一個(gè)我們總結(jié)出的class語法：

全局命名空間

所有的Class都和設(shè)計(jì)系統(tǒng)關(guān)聯(lián)的都以全局命名空間為前綴，這就是公司名稱后面加一個(gè)連體符

如果你工作的CSS框架是用于單個(gè)網(wǎng)站或者如果你對(duì)你的開發(fā)環(huán)境有絕對(duì)控制，那么引入全局命名空間是不需要的。但是如果你的設(shè)計(jì)系統(tǒng)是混合的技術(shù)，那么為系統(tǒng)特定代碼創(chuàng)建一個(gè)標(biāo)識(shí)是很重要的。作為第三方開發(fā)者，在多個(gè)環(huán)境中利用他們的系統(tǒng)，營(yíng)銷團(tuán)隊(duì)可能會(huì)失控，因此 Lightning Design System引用了相似的方法到他們的系統(tǒng)之中(通過前綴.slds-)，在我們的例子中，許多我們客戶的開發(fā)者使用Angular，因此他們已經(jīng)很熟悉命名空間的概念，因?yàn)锳ngular使用ng-作為命名空間，為Angular特殊的代碼。

Class前綴

除了命名空間，我們添加前綴到每個(gè)Class，為了使之更加明顯，這個(gè)這個(gè)Class是做什么的。下面是我們使用的類前綴：

• c- 用于UI組件,比如.cn-c-card 或.cn-c-header
• l- 用于布局相關(guān)樣式, 比爾.cn-l-grid__item或.cn-l--two-column
• u- 用于公共部分, 比如.cn-u-margin-bottom-double 或.cn-u-margin-bottom-double
• is- 和 has- 用于特定狀態(tài), 比如.cn-is-active或 .cn-is-disabled. 適用于這些狀態(tài)為基礎(chǔ)的樣式。
• js- 用于目標(biāo)特定功能, 比如.js-modal-trigger. 這些class沒有綁定樣式; 他們只是為了行為而保留的. 對(duì)于大多數(shù)案例, 這些 js- 類將在元素上會(huì)切換基于狀態(tài)的類。

我被灌輸來自Harry Roberts的一個(gè)概念，并且一開始在我認(rèn)為這有道理的同事，我還是持有質(zhì)疑的態(tài)度的，僅僅因?yàn)檫@是額外的字符并且我認(rèn)為前綴會(huì)降低代碼可讀性。然而我的想法是不對(duì)的。在實(shí)施類前綴之后，我發(fā)現(xiàn)他們對(duì)于分清每個(gè)類的角色十分有幫助并且對(duì)于破譯一個(gè)應(yīng)用的代碼庫(kù)十分容易一目了然。對(duì)于設(shè)計(jì)系統(tǒng)用戶，這種清晰的代碼能夠整理清楚頭緒，特別有用。

BEM語法

BEM 代表了“塊元素修飾”，這意味著：

• Block 主要組件塊, 比如.cn-c-card或者.cn-c-btn
• Element 是主要塊的一個(gè)子類,比如.cn-c-card__title
• Modifier 是一個(gè)組件樣式的各種變化, 比如.cn-c-alert--error

這種方法論已經(jīng)很受歡迎了，將這些概念和全局命名空間和類前綴結(jié)合在一起，允許我們創(chuàng)造更明顯封裝的類名。

把它們都放到一起：解剖一個(gè)類

全局命名空間的結(jié)合，類別前綴，和BEM語法引出了一個(gè)明確的(是的，冗長(zhǎng)的)類字符創(chuàng)，允許開發(fā)者們?cè)跇?gòu)造UI的時(shí)候演繹他在之間扮演的角色。

讓我們檢查下以下的例子：

• cn- 是來自設(shè)計(jì)系統(tǒng)的用于所有樣式的全局命名空間。
• c- 是class的類別, 在案例中，c- 一位置“組件”
• btn 是塊名(“Block(塊)” 就是BEM中的“B”)
• --secondary 是一個(gè)修飾成分, 指向一個(gè)塊的變化多端的樣式 (“Modifier(修飾)” 就是BEM中的“M”)

這里有另一個(gè)例子：

• cn- 再一次出現(xiàn)就是系統(tǒng)的全局命名空間。
• l- 是類的類別, 在這種情況下l- 意味著 “布局”
• grid 是塊名
• __item 是一個(gè)元素, 表明那是塊中的一個(gè)分支(“Element”在BEM中指“E”)

還有一個(gè)：

• cn- 是系統(tǒng)的全局命名空間。
• c- 是類的類別, 在這個(gè)例子中c- 意味著 “component”
• primary-nav 是塊名
• __submenu是一個(gè)元素, 指出他是塊的子元素 (“Element” 在BEM中是“E”)

此外，毫無疑問，這些類比大多數(shù)其他方法的類更加冗長(zhǎng)，但是對(duì)于這種特殊的系統(tǒng)，這些約定很有意義。

其他技巧

明確細(xì)節(jié)

為了防止代碼瓦解，我們?cè)敿?xì)說明如何處理這么多細(xì)小的細(xì)節(jié)，就像注釋、代碼塊之間的空間距，tab還是space等等。感謝上天，Harry Roberts已經(jīng)將一個(gè)極佳的綜合的資源整合在了一起，稱之為CSS Guidelines，對(duì)于這些類型的約定，這個(gè)作為我們的底線。我們梳理所有的代碼并且標(biāo)記出我們偏離Harry指出地方的計(jì)劃。

Sass父選擇器

我一直有個(gè)關(guān)于CSS的一個(gè)問題，是找出究竟在哪里放一個(gè)規(guī)定的規(guī)則。如果我有一個(gè)主要的導(dǎo)航組件，我要把這些樣式放在頭部還是在部分的主要導(dǎo)航Sass?謝天謝地，Sass父元素原則器出現(xiàn)了，這允許我們把所有的組件特定的樣式放在一個(gè)根元素下：

這意味著，所有的主要導(dǎo)航樣式都可以在一個(gè)主導(dǎo)航Sass部分中找到，而不是將他們分成好幾個(gè)文件。

Sass嵌套的明確規(guī)則

在Sass中嵌套可能十分方便，但是增加了糟糕輸出的危險(xiǎn)，會(huì)有過長(zhǎng)的選擇器字符創(chuàng)。我們遵循《盜夢(mèng)空間》規(guī)則，嵌套永遠(yuǎn)不超過3層。

牢記設(shè)計(jì)系統(tǒng)的CSS平坦規(guī)則，我們希望在下列情況中限制嵌套：

1. 一個(gè)樣式塊修飾
2. 媒體查詢
3. 父元素選擇器
4. 狀態(tài)
5. 樣式塊裝飾 對(duì)于裝飾來說，如果規(guī)則只有幾行長(zhǎng)度，裝飾塊可以被嵌套在父元素中，就像下面這樣：

由于&符號(hào)，這會(huì)編譯成：

對(duì)于長(zhǎng)樣式塊，我們不會(huì)嵌套裝飾代碼，因?yàn)檫@減少了代碼的可讀性。

媒體查詢器

組件特定媒體查詢器能夠在組件塊中嵌套。

這個(gè)會(huì)被編譯成：

父元素選擇器

設(shè)計(jì)系統(tǒng)會(huì)充分使用Sass的父元素選擇器原理。這里允許所有的給定組件的規(guī)則在一個(gè)地方維護(hù)。

這會(huì)被編譯成：

cn-c-primary-nav所有樣式都會(huì)在一個(gè)地方找到，而不是分散在許多部分文件之中。

1.狀態(tài)

組件的狀態(tài)必須包括在一個(gè)嵌套的元素之中。這包括了hover, focus,和active狀態(tài)：

這需要編譯為：

狀態(tài)同樣可以選用通用類的形式，比如is-和 has-:

再者會(huì)被編譯成：

為了創(chuàng)建一個(gè)堅(jiān)固的系統(tǒng)，將這些規(guī)則都放入一個(gè)地方中，給我們需要堅(jiān)持的一些制約和規(guī)定。當(dāng)我們遇到一些規(guī)定不是很明顯或者有多重解決方案的情況下，我們需要一次談話，討論如何處理這些問題，如果需要的話可以更新方針。

這對(duì)每個(gè)人都用嘛?

在你開始沉迷于，困惑以及開始不同意一些我們?cè)趧?chuàng)建系統(tǒng)的時(shí)候的決定，記住這個(gè)結(jié)構(gòu)對(duì)我們正在運(yùn)行的系統(tǒng)很重要。這是否意味著，這是對(duì)任何項(xiàng)目都堅(jiān)不可摧的解決方案?不，我不是提議一定用那個(gè)。特定需求和組織設(shè)置，對(duì)設(shè)計(jì)CSS架構(gòu)的系統(tǒng)有足夠的影響。

我為很多項(xiàng)目工作過，在哪里我可以用類似于.table-of-contents li a這樣的字符串對(duì)付過去，但是這些項(xiàng)目大多數(shù)都是由我管理的。對(duì)于設(shè)計(jì)一個(gè)團(tuán)隊(duì)環(huán)境的戶項(xiàng)目，我傾向于冗長(zhǎng)，明確的語法，就像我上面描述的那樣，因?yàn)樗麄儾唤o人們搞砸的空間?？纯雌渌麍F(tuán)隊(duì)像Sparkbox 得出的類似的結(jié)論，這是非常贊的。

距離項(xiàng)目已經(jīng)過去幾個(gè)禮拜了，我們重新在1.1版本上的設(shè)計(jì)系統(tǒng)繼續(xù)工作。我希望回到這個(gè)代碼庫(kù)，并且能夠看到我是如何速度地重新適應(yīng)它的!

名稱欄目：設(shè)計(jì)系統(tǒng)的CSS結(jié)構(gòu)
文章來源：http://www.bm7419.com/news26/161926.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、服務(wù)器托管、小程序開發(fā)、企業(yè)建站、軟件開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)