如何搭建系統CSS架構

　　css是英文Cascading Style Sheets的縮寫(xiě)。 它是一種用來(lái)表現HTML(標準通用標記語(yǔ)言的一個(gè)應用)或XML(標準通用標記語(yǔ)言的一個(gè)子集)等文件樣式的計算機語(yǔ)言。那么如何搭建系統CSS架構呢，一起來(lái)學(xué)習學(xué)習!

　　搭建CSS法則

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

　　完成我的前端指導問(wèn)卷，這些導致一系列前端規則和系統封裝。這里有些我們創(chuàng )建的CSS具體規則。

　　模塊化 —— 設計系統在每一個(gè)方面都是模塊，這是非常實(shí)用寫(xiě)CSS的方法。這在組件之間需要清晰分隔。

　　可讀性是關(guān)鍵 ——開(kāi)發(fā)者必須在第一眼理解CSS代碼，并且理解每一個(gè)選擇器的目的。

　　清晰勝過(guò)簡(jiǎn)潔 —— 設計系統有時(shí)候看上去很冗長(cháng)，但是作為交換，它提供清晰和韌性。保持CSS可讀性和可擴展性意味著(zhù)犧牲簡(jiǎn)潔的語(yǔ)法。

　　保持平面化 —— 長(cháng)的選擇器要回避，無(wú)論什么地方，盡可能保持CSS獨立DOM和模塊化。

　　避免沖突 —— 因為組件會(huì )部署許多不同的應用，保證設計系統之間的CSS不會(huì )和其他的庫和系統有沖突，這很重要。通過(guò)系統空間命名Class名可以完成這個(gè)，更多的會(huì )在之后描述。

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

　　全局命名空間

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

　　.cn-

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

　　Class前綴

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

　　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)為基礎的樣式。

　　js- 用于目標特定功能, 比如.js-modal-trigger. 這些class沒(méi)有綁定樣式; 他們只是為了行為而保留的. 對于大多數案例, 這些 js- 類(lèi)將在元素上會(huì )切換基于狀態(tài)的類(lèi)。

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

　　BEM語(yǔ)法

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

　　Block 主要組件塊, 比如.cn-c-card或者.cn-c-btn

　　Element 是主要塊的一個(gè)子類(lèi),比如.cn-c-card__title

　　Modifier 是一個(gè)組件樣式的各種變化, 比如.cn-c-alert--error

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

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

　　全局命名空間的結合，類(lèi)別前綴，和BEM語(yǔ)法引出了一個(gè)明確的(是的，冗長(cháng)的)類(lèi)字符創(chuàng )，允許開(kāi)發(fā)者們在構造UI的時(shí)候演繹他在之間扮演的角色。

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

　　.cn-c-btn--secondary

　　cn- 是來(lái)自設計系統的用于所有樣式的全局命名空間。

　　c- 是class的類(lèi)別, 在案例中，c- 一位置“組件”

　　btn 是塊名(“Block(塊)” 就是BEM中的“B”)

　　--secondary 是一個(gè)修飾成分, 指向一個(gè)塊的變化多端的樣式 (“Modifier(修飾)” 就是BEM中的“M”)

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

　　.cn-l-grid__item

　　cn- 再一次出現就是系統的全局命名空間。

　　l- 是類(lèi)的類(lèi)別, 在這種情況下l- 意味著(zhù) “布局”

　　grid 是塊名

　　__item 是一個(gè)元素, 表明那是塊中的一個(gè)分支(“Element”在BEM中指“E”)

　　還有一個(gè)：

　　.cn-c-primary-nav__submenu

　　cn- 是系統的全局命名空間。

　　c- 是類(lèi)的類(lèi)別, 在這個(gè)例子中c- 意味著(zhù) “component”

　　primary-nav 是塊名

　　__submenu是一個(gè)元素, 指出他是塊的子元素 (“Element” 在BEM中是“E”)

　　此外，毫無(wú)疑問(wèn)，這些類(lèi)比大多數其他方法的類(lèi)更加冗長(cháng)，但是對于這種特殊的系統，這些約定很有意義。

　　其他技巧

　　明確細節

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

　　Sass父選擇器

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

　　.cn-c-primary-nav {

　　/**

　　* Nav appearing in header

　　* 1) Right-align navigation when it appears in the header

　　*/

　　.cn-c-header & {

　　margin-left: auto; /* 1 */

　　}}

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

　　Sass嵌套的明確規則

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

　　牢記設計系統的CSS平坦規則，我們希望在下列情況中限制嵌套：

　　一個(gè)樣式塊修飾

　　媒體查詢(xún)

　　父元素選擇器

　　狀態(tài)

　　樣式塊裝飾 對于裝飾來(lái)說(shuō)，如果規則只有幾行長(cháng)度，裝飾塊可以被嵌套在父元素中，就像下面這樣：

　　.cn-c-alert {

　　border: 1px solid gray;

　　color: gray;

　　/**

　　* 錯誤彈出

　　*/

　　&--error {

　　border-color: red;

　　color: red;

　　}}

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

　　.cn-c-alert {

　　border: 1px solid gray;

　　color: gray;}.cn-c-alert--error {

　　border-color: red;

　　color: red;}

　　對于長(cháng)樣式塊，我們不會(huì )嵌套裝飾代碼，因為這減少了代碼的可讀性。

　　媒體查詢(xún)器

　　組件特定媒體查詢(xún)器能夠在組件塊中嵌套。

　　.cn-c-primary-nav {

　　/* Base styles */

　　/**

　　* 1) On larger displays, convert to a horizontal list

　　*/

　　@media all and (min-width: 40em) {

　　display: flex;

　　}}

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

　　.cn-c-primary-nav {

　　/* Base styles */}@media all and (min-width: 40em) {

　　.cn-c-primary-nav {

　　display: flex;

　　}}

　　父元素選擇器

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

　　.cn-c-primary-nav {

　　/**

　　* Nav appearing in header

　　* 1) Right-align navigation when it appears in the header

　　*/

　　.cn-c-header & {

　　margin-left: auto; /* 1 */

　　}}

　　這會(huì )被編譯成：

　　.cn-c-header .cn-c-primary-nav {

　　display: flex;}

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

　　狀態(tài)

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

　　.cn-c-btn {

　　background: blue;

　　&:hover, &:focus {

　　background: red;

　　}}

　　這需要編譯為：

　　.cn-c-btn {

　　background: blue;}.cn-c-btn:hover, .cn-c-btn:focus {

　　background: red;}

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

　　.cn-c-accordion__panel {

　　overflow: hidden;

　　max-height: 0;

　　&.cn-is-active {

　　max-height: 40em;

　　}}

　　者會(huì )被編譯成：

　　.cn-c-accordion__panel {

　　overflow: hidden;

　　max-height: 0;}.cn-c-accordion__panel.cn-is-active {

　　max-height: 40em;}

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

【如何搭建系統CSS架構】相關(guān)文章：

如何成為優(yōu)秀的系統架構師06-03

企業(yè)大規模系統整合架構如何選型10-27

系統架構設計模式大全08-22

系統架構師是做什么的12-30

托福寫(xiě)作高分框架如何搭建09-18

圖書(shū)檢索系統體系架構研究12-05

基于云架構的系統安全設計08-08

系統架構師的就業(yè)前景分析01-11

系統架構設計師要素01-11