摘要：相反的，提供了全局作用域和局部作用域。組成界面的分子的樣式可以通過元素選擇器定位。元素選擇器的優(yōu)先級(jí)很低，因此他們不會(huì)覆蓋任何基于類選擇器的樣式。使用元素選擇器有以下優(yōu)點(diǎn)避免了的冗長(zhǎng)沒有冗余的類。

最近學(xué)習(xí)到CSS的繼承屬性，正好看到這篇文章，便將它翻譯出來。作者的思想，在平時(shí)的項(xiàng)目中或多或少都有用過，但是從來沒有仔細(xì)去思考如何利用這些特性讓代碼更加優(yōu)雅。

我熱愛模塊化設(shè)計(jì)。長(zhǎng)期以來，我將網(wǎng)站分為組件，而不是頁面，并動(dòng)態(tài)地將這些組件合并成界面，這樣可以提高彈性、效率與可維護(hù)性。

但是我不想讓我設(shè)計(jì)的東西像是互相無關(guān)的事情，我是制作一個(gè)頁面，而不是超現(xiàn)實(shí)主義蒙太奇。

幸運(yùn)的是，有一門叫做CSS的技術(shù)，就是專門解決上述問題的。CSS可以通過賦予HTML組件樣式以最小的成本確保設(shè)計(jì)的一致性。這多虧了CSS的兩個(gè)主要的特征：

繼承inheritance

層疊the cascade（CSS中的C）

盡管這些特征可以保證網(wǎng)頁文檔的樣式代碼高效、DRY，并且這也成為了CSS存在的理由，但是它們明顯不受歡迎。封裝的一些CSS模塊，比如BEM、Atomic CSS，都是在盡他們最大的努力回避或者抑制這些特征，這讓開發(fā)者能夠更多地控制這些CSS，但這僅僅只是一項(xiàng)頻繁的專項(xiàng)干預(yù)機(jī)制。

我準(zhǔn)備帶著一顆對(duì)模塊化界面設(shè)計(jì)尊重的心來重新審視繼承、層疊和作用域，目的在于向讀者展示如何平衡這些特征來使我們的CSS代碼變得更加的簡(jiǎn)潔和靈活，并且界面也更加易于擴(kuò)展。

盡管很多人提議為什么CSS不只提供一個(gè)全局作用域，但是如果有，很多東西就會(huì)變得重復(fù)。相反的，CSS提供了全局作用域和局部作用域。就像在JavaScript里，局部作用域可以訪問父級(jí)和全局作用域，CSS里的局部作用域幫助了繼承。

比方說，如果在根元素（全局）html中聲明了font-family，那就能確保這一規(guī)則會(huì)被應(yīng)用于該文檔中所有的祖先元素中（在下一節(jié)中將會(huì)討論一些例外）。

就像在JavaScript里面，如果我聲明一個(gè)變量為局域作用域，那它在全局或者說任意祖先作用域中都是無效的，但它能夠?qū)ζ渥佑蚱鹱饔茫ū热缟厦娲a中的p元素）。在下一個(gè)例子中，line-height為1.5并不能對(duì)html元素生效，然而在p元素里的a元素繼承了p的line-heigh值。

繼承的最棒之處是你只需要非常少的代碼就能建立一致的可視化設(shè)計(jì)基礎(chǔ)，這些樣式甚至?xí)绊懙侥氵€沒有寫出來的HTML。這些是不會(huì)過時(shí)的代碼。

當(dāng)然，有很多的方法可以定義普通的樣式。比如，我可以創(chuàng)建一個(gè)類.sans-serif

將它應(yīng)用于任何我認(rèn)為會(huì)用上這個(gè)樣式的元素中：

這樣我可以準(zhǔn)確地選擇哪些元素需要這個(gè)樣式，而哪些元素不需要。

任何可以控制的機(jī)會(huì)都是誘人的，但是也存在很明顯的問題。在這種情況下，我們不僅僅需要手動(dòng)給需要的元素添加類名（這意味著必須一開始就知道這些類名），而且意味著我們已經(jīng)放棄了支持動(dòng)態(tài)內(nèi)容的可能性：WYSIWYG編輯器和Markdown解析器都不能給默認(rèn)的p元素提供sans-serif類。

除了class="sans-serif"需要同時(shí)在樣式表和HTML里面添加代碼外，它和style="font-family: sans-serif"的區(qū)別并不大。如果使用繼承的話，那我們可以寫更少的代碼甚至不寫其他代碼。相比于給每一個(gè)字體樣式寫類名，我們只需要在html元素里聲明任何我們想要的樣式：

有些屬性的默認(rèn)值不是inherit，有些元素也沒有inherit一些屬性。在一些情況下，我們可以利用[property name]: inherit來決定繼承性。

比如，input和textarea元素不會(huì)繼承字體的任何屬性。為了保證所有的元素能夠從全局作用域中繼承這些屬性，我們可以用全局選擇器和關(guān)鍵字inherit。這樣，就能最大程度地利用繼承。

注意，我沒有設(shè)置font-size的值。我不想讓font-size具有直接的繼承性，這樣它可能會(huì)覆蓋一些元素的默認(rèn)user-agent樣式，比如說頭部元素、small元素等。如此一來，我可以節(jié)約一行代碼，并且讓user-agent決定這些樣式。

另外一個(gè)屬性我不想用繼承的是font-style：我不想重新定義em的斜體，這會(huì)浪費(fèi)工作時(shí)間，并且導(dǎo)致更多的代碼量。

現(xiàn)在，如我所想實(shí)現(xiàn)了所有可以繼承或者是強(qiáng)制繼承的字體樣式?，F(xiàn)在只花了兩個(gè)區(qū)塊就能聲明一致性和作用域。從現(xiàn)在起，開發(fā)者在構(gòu)造組件時(shí)，甚至不用再考慮font-family、line-height或者是color，除非碰到一些特例，這時(shí)就需要用到層疊。

我可以利用繼承實(shí)現(xiàn)主要的標(biāo)題擁有相同的font-family、color和line-height的目的。但是我想讓font-size的值不一樣時(shí)，可能什么都不需要設(shè)置，因?yàn)閡ser-agent已經(jīng)為h1元素提高了更大號(hào)的font-size（它是我們?cè)O(shè)置的基礎(chǔ)字體的125%倍）。

但是如果我想調(diào)整元素的font-size呢？這時(shí)候就可以利用全局作用域的優(yōu)勢(shì)，在局部作用域里只對(duì)我需要調(diào)整的元素進(jìn)行調(diào)整。

如果默認(rèn)封裝了CSS元素的樣式，那這種情況就不可能實(shí)現(xiàn)：給h1添加所有的字體樣式。相反地，我可以將我的樣式分成獨(dú)立的類，用空格分離添加到每一個(gè)h1中。

無論采用哪種方法，都會(huì)增加工作量，并且只能產(chǎn)生一個(gè)具有固定樣式的h1。如果利用層疊，就可以用我想用的方式去定義最多的元素的樣式，其實(shí)h1就僅僅是一個(gè)特例。層疊就像一個(gè)過濾器，意味著只有在添加新的樣式時(shí)舊的樣式才會(huì)被覆蓋。

我們已經(jīng)有了一個(gè)好的開始，但是真正要掌握層疊，我們需要盡可能多地定義公共元素的樣式。為什么呢？因?yàn)槲覀兓旌系哪K是由獨(dú)立的HTML元素組成的，而屏幕閱讀器友好的界面應(yīng)該充分利用語義化的結(jié)構(gòu)進(jìn)行標(biāo)記。

組成界面的“分子”的"atoms"樣式（atomic design terminology）可以通過元素選擇器定位。元素選擇器的優(yōu)先級(jí)很低，因此他們不會(huì)覆蓋任何基于類選擇器的樣式。

我們需要做的第一件事是定義所有我們需要用到的元素的樣式。

如果想較簡(jiǎn)潔地實(shí)現(xiàn)統(tǒng)一性的界面，接下來的步驟很重要：每一次需要?jiǎng)?chuàng)建一個(gè)新的組件時(shí)，如果引入了新的元素，那么利用元素選擇器定義這些新元素樣式。現(xiàn)在還不需要使用限制性、高優(yōu)先級(jí)的選擇器，也不需要添加類名來定義樣式，就使用語義化元素其本身。

舉個(gè)例子，如果我還沒有定義button的樣式（正如前面的例子），而我新的組件中包含了一個(gè)button元素，這時(shí)我就需要為整個(gè)界面的button元素定義樣式。

現(xiàn)在，如果你需要寫一個(gè)新的組件但是擁有相同的button，就少了一件需要擔(dān)心的事情了。你不需在不同的命名空間重寫相同的CSS，也不需要記住或者編寫類名。CSS設(shè)計(jì)的目的就是為了讓事情變得更簡(jiǎn)單和高效。

使用元素選擇器有以下優(yōu)點(diǎn)：

避免了HTML的冗長(zhǎng)（沒有冗余的類）。

避免了樣式表的冗長(zhǎng)（不同的組件可以共用樣式，不需要對(duì)每個(gè)組件進(jìn)行重寫）。

最終的界面擁有語義化的HTML結(jié)構(gòu)。

利用類來提供唯一的樣式經(jīng)常被定義為“關(guān)注點(diǎn)分離”，這是對(duì)W3C中關(guān)注點(diǎn)分離原則的誤解，它的目標(biāo)是利用HTML和CSS樣式來描述整個(gè)結(jié)構(gòu)。類是專門為了指定樣式而制定的，并且出現(xiàn)在結(jié)構(gòu)中，因此無論他們出現(xiàn)在哪里，在技術(shù)上都是在打破分離。你不得不通過改變自然結(jié)構(gòu)來獲取樣式。

如果不依賴表面的結(jié)構(gòu)標(biāo)記（類、內(nèi)聯(lián)樣式），你的CSS就會(huì)兼容通用結(jié)構(gòu)，并且符合語法規(guī)范。這使得擴(kuò)展內(nèi)容與功能變得不再重要，并且不需要把它變成一個(gè)樣式任務(wù)。它也使得你的CSS能夠被擁有傳統(tǒng)語義化結(jié)構(gòu)的不同的工程重復(fù)利用（CSS的‘方法論’可能要另當(dāng)別論）。

在有人提出我思考得太簡(jiǎn)單前，我意識(shí)到界面上不是所有的按鈕都在做相同的事情，我也意識(shí)到功能不同的按鈕可能看起來樣式也會(huì)不一樣。

這并不代表我需要定義類、繼承或者是層疊。讓一個(gè)界面的按鈕看起來完全不一樣會(huì)混淆你的用戶。為了保證可訪問性和一致性，很多的按鈕只需要在外表的標(biāo)簽上進(jìn)行區(qū)分。

記住，樣式不是視覺上進(jìn)行區(qū)分的唯一方法。內(nèi)容也可以提供視覺區(qū)分，而且這種方法會(huì)更加直觀，你可以從文字上直接明白他們的區(qū)別。

必須或者適當(dāng)?shù)囟鄮褂脴邮綄?duì)內(nèi)容進(jìn)行區(qū)分的場(chǎng)景可能比你想象的還要少。通常，差異化的樣式只是補(bǔ)充條件，比如一個(gè)紅色的背景或者帶圖標(biāo)的文本標(biāo)簽。文本標(biāo)簽的存在對(duì)那些使用語音激活的軟件有特殊作用：說“紅色按鈕”或者“button with cross icon”不可能讓軟件識(shí)別。

我將在“Utility Classes”一節(jié)中，介紹如何給看起來相似的元素添加細(xì)節(jié)。

語義化的HTML不僅僅指結(jié)構(gòu)，標(biāo)簽特征能定義類型、樣式屬性和狀態(tài)。這些對(duì)可訪問性都非常重要，因此需要寫在HTML中需要的地方。正因?yàn)樗麄兂霈F(xiàn)在HTML中，他們?yōu)橹谱鳂邮姐^子提供了額外的機(jī)會(huì)。

比如，input元素?fù)碛衪ype屬性，你應(yīng)該利用它的優(yōu)點(diǎn)，另外比如說aria-invalid是用來描述狀態(tài)的。

有幾點(diǎn)需要注意：

由于使用了inherit關(guān)鍵字，color、font-family、line-height繼承了html的值，因此不需要設(shè)置。如果想改變整個(gè)應(yīng)用范圍內(nèi)的font-family，只需要在html塊中進(jìn)行一次聲明。

邊框顏色與color相關(guān)聯(lián)，因此它也繼承了全局域的顏色，我需要設(shè)置的只有邊框的寬度和風(fēng)格。

屬性選擇器[aria-invalid]是無限制的。這意味著它可以被更好地應(yīng)用（可以同時(shí)應(yīng)用在input和textarea選擇器上），且低優(yōu)先級(jí)。簡(jiǎn)單的屬性選擇器和類選擇器有相同的優(yōu)先級(jí)。無限制的使用它們意味著任意寫在更深層疊處的類可以覆蓋它們。

BEM方法可以利用修飾類來解決這個(gè)方法，比如input-invalid。但考慮到無效狀態(tài)只能應(yīng)用在可通信時(shí)，因此input-invalid一定是多余的。換句話說，aria-invalid屬性必須出現(xiàn)，那類的作用是什么呢？

在層疊多，大量的元素和屬性選擇器絕對(duì)是我的最愛：新組件的構(gòu)造就變成了，了解HTML結(jié)構(gòu)比了解公司或者組織的命名規(guī)范重要得多。分配到這個(gè)項(xiàng)目中的開發(fā)者將會(huì)從已經(jīng)存在的繼承樣式中獲益，這減少了對(duì)參考文檔的需求或者寫新的CSS的必要性。Tim Baxter在Meaningful CSS: Style It Like You Mean It中提到了案例。

到目前為止，我們都沒有寫額外的特定組件的CSS，這不代表我們沒有給它們?nèi)魏螛邮?。所有的組件都是由HTML元素的，更復(fù)雜的組件都是依靠這些元素的排列順序進(jìn)行組合的。

這就引出了布局的概念。

我們主要需要處理流式布局——連續(xù)的塊級(jí)元素的間距。你可能注意到至今我仍沒有為元素設(shè)置任何的margin。那是因?yàn)閙argin不應(yīng)該考慮為元素的屬性，而應(yīng)該是元素上下文的屬性。也就是說，只有元素相遇時(shí)他們才起作用。

幸運(yùn)的是，相鄰選擇符可以準(zhǔn)確地描述這種關(guān)系。除了少數(shù)例外，利用層疊可以對(duì)所有出現(xiàn)在子級(jí)中的塊級(jí)元素設(shè)置統(tǒng)一的默認(rèn)值。

極低優(yōu)先級(jí)lobotomized owl選擇器確保了所有的元素（除了常見的例外）的間距為一行。這意味著在所有案例中默認(rèn)存在白色的間距，所有開發(fā)流式布局的開發(fā)者都有一個(gè)合理的起點(diǎn)。

在多數(shù)情況下，margins只關(guān)心它本身。但由于優(yōu)先級(jí)較低，也很容易在需要的地方覆蓋它的一行間距。比如，為了表示標(biāo)簽和它們相關(guān)元素的關(guān)聯(lián)性，我可能需要縮小它們之間的距離。在下面的例子中，標(biāo)簽和它們后面的所有元素（input、textarea、select等等）之間的間隔將會(huì)縮小。

使用層疊意味著只需要在需要的地方寫特定的樣式，其他的符合一個(gè)合理的基準(zhǔn)。

需要注意的是，因?yàn)閙argins只出現(xiàn)在元素之間，它們不會(huì)和其容器的padding重疊。

不管你是否引入了容器元素，都會(huì)產(chǎn)生相同的邊距。這意味著，你可以像下面這樣實(shí)現(xiàn)相同的布局——這些margins在divs之間出現(xiàn)比在標(biāo)簽之間出現(xiàn)要好。

利用像atomic CSS的方法實(shí)現(xiàn)相同的結(jié)果，可以手動(dòng)組合具體的margin-related類，包括通過* + *隱式處理控制first-child的特例。

請(qǐng)牢記如果一個(gè)元素使用atomic CSS，那只會(huì)覆蓋它的上邊距。你需要為color、background-color，或者說其他的主要屬性多帶帶添加特定的類，因?yàn)閍tomic CSS不會(huì)利用繼承或者元素選擇器。

Atomic CSS讓開發(fā)者能夠完全控制樣式，而不需要內(nèi)聯(lián)樣式（內(nèi)聯(lián)樣式不像類一樣可以重復(fù)利用）。為多帶帶的屬性提供類名可以在樣式表中減少聲明的復(fù)制。

然而，它必須直接在結(jié)構(gòu)中添加標(biāo)記來實(shí)現(xiàn)。這就要求開發(fā)者學(xué)習(xí)它冗長(zhǎng)的API，并且增加很多額外的HTML代碼。

相反，如果對(duì)任意HTML元素和它們的空間關(guān)系設(shè)置樣式，那CSS方法就會(huì)變得過時(shí)。相比于包含一個(gè)疊加樣式的HTML系統(tǒng)，使用一致性設(shè)計(jì)系統(tǒng)進(jìn)行維護(hù)將擁有很大的優(yōu)勢(shì)。

無論如何，下面是我們的CSS架構(gòu)和流式布局解決方案需具備的特點(diǎn)：

全局（html）樣式和強(qiáng)制繼承；

流式布局和一些例外（lobotomized owl選擇器）；

元素和屬性樣式。

我們還沒有寫具體的組件和CSS類，但是我們已經(jīng)完成很絕大多數(shù)的樣式——前提是假設(shè)我們能夠合理地寫出可復(fù)用的類。

類有一個(gè)全局作用域：不管它們應(yīng)用在HTML的哪個(gè)位置，它們都會(huì)受到相關(guān)的CSS的影響。這很多情況下會(huì)被看成缺點(diǎn)，因?yàn)閮蓚€(gè)分開工作的開發(fā)者可能會(huì)寫出相同名稱的類，從而影響到對(duì)方的工作。

最近構(gòu)思的CSS modules通過編程產(chǎn)生唯一的類名綁定到他們本地或者組件內(nèi)，以彌補(bǔ)上述不足。

忽略生成代碼的丑陋膚淺，你可能很容易看到獨(dú)立編寫的組件直接的差別：唯一的標(biāo)識(shí)用來定義相似的東西的樣式。這樣導(dǎo)致界面要么不一致，要么在更大的努力和更多的冗余下變得一致。

把公共元素視為獨(dú)一無二的是毫無道理的。你應(yīng)該定義某種類型的元素的樣式，而不是具體的元素實(shí)例。牢記“類”意味著“可能包含更多內(nèi)容的某一類型的事物”。換句話說，所有的類應(yīng)該是實(shí)用工具類：可在全局重復(fù)使用。

當(dāng)然，在這個(gè)例子中，類名.button是多余的：因?yàn)槲覀兛墒鞘褂胋utton元素選擇器。但如果是一個(gè)特殊類型的button呢？例如，我們可能寫一個(gè)類名.danger表示這類buttons可以進(jìn)行代表危險(xiǎn)性的操作，比如刪除數(shù)據(jù)：

因?yàn)轭愡x擇器比元素選擇器的優(yōu)先級(jí)高，和屬性選擇器擁有一樣的優(yōu)先級(jí)，任何寫在類選擇器里的規(guī)則都會(huì)覆蓋元素選擇器和屬性選擇器的。所有上面的危險(xiǎn)button將會(huì)以白色文本紅色背景的樣式出現(xiàn)，但是其他的屬性——比如padding、聚焦時(shí)的outline和margin都會(huì)保持不變。

如果數(shù)個(gè)開發(fā)者長(zhǎng)時(shí)間在相同的代碼上進(jìn)行開發(fā)，偶爾會(huì)發(fā)生命名沖突。但是這里有很多方法去避免，比如，哦，我不知道，首先要做的事是對(duì)你將要采用的命名進(jìn)行搜索看是否存在。你永遠(yuǎn)不知道，有人可能已經(jīng)解決了你要解決的問題。

對(duì)于utility classes，我最喜歡的事是將它們?cè)O(shè)置在容器上，然后利用鉤子去影響里面的子元素的布局。比如，我可以快速對(duì)任何元素編碼出一個(gè)等間隔、響應(yīng)式、居中的布局：

這樣，我可以讓列表、按鈕、按鈕和鏈接的組合居中。這多虧了使用> *，它表示.centered里面任何的直接子元素都適用這些樣式，在這個(gè)范圍內(nèi)繼承全局和父級(jí)元素的樣式。

我已經(jīng)調(diào)整了元素的margins，這樣這些元素就可以自由地?fù)Q行，而不會(huì)破壞* + *選擇器里設(shè)置的垂直布局。這樣，通過設(shè)置任意元素的局部作用域，就可以采用了少量的代碼就提供了一個(gè)通用的、響應(yīng)式的布局解決方案。

我的小型flexbox-based grid system(壓縮后93B)基本上就只是一個(gè)utility class。它高度可復(fù)用，并且因?yàn)槔昧薴lex-basis，不需要斷點(diǎn)進(jìn)行干預(yù)。我只用了flexbox布局的方法。

使用BEM，可以在每個(gè)網(wǎng)格上設(shè)置一個(gè)顯式的“元素”類：

但這不是必須的。只需要一個(gè)標(biāo)識(shí)去實(shí)例化局部作用域。相比于我的版本，這些主題不會(huì)受到外部影響的保護(hù)，也不應(yīng)該受> *影響。唯一的不同是充斥著大量的標(biāo)記。

現(xiàn)在，我們已經(jīng)開始合并類，但是如預(yù)期一樣只合并通用的樣式。我們?nèi)耘f沒有多帶帶為復(fù)雜組件定義樣式。相反，我們以可復(fù)用的方式解決系統(tǒng)層面的問題。當(dāng)然，你需要在注釋中說明如何使用這些類。

這些Utility classes同時(shí)利用了CSS的全局作用域、局部作用域、繼承和層疊的優(yōu)勢(shì)。這些類可以被應(yīng)用在各個(gè)地方，它們實(shí)例化局部作用域以影響子元素，繼承了父級(jí)元素或者全局作用域的樣式，同時(shí)不需要過度使用元素選擇器或者類選擇器。

現(xiàn)在我們的層疊是這樣的：

全局（html）樣式和強(qiáng)制繼承；

流式布局和一些例外（lobotomized owl選擇器）；

元素和屬性的樣式；

通用utility classes。

當(dāng)然，可能會(huì)有不需要寫上面案例中那樣的utility classes的情況。但重點(diǎn)是，如果需要對(duì)一個(gè)組件使用，那解決方案應(yīng)該針對(duì)所有的組件，應(yīng)該站在系統(tǒng)的角度思考問題。

我們已經(jīng)定義了組件的樣式，組合組件的方式，所以很容易忽略這一部分的內(nèi)容。但是值得一提的是，任何沒有從其他組件中創(chuàng)建出來的組件（包括單個(gè)的HTML元素）都是有必要存在的。它們是使用ID選擇符的組件，并且可能產(chǎn)生系統(tǒng)風(fēng)險(xiǎn)。

事實(shí)上，一個(gè)好的經(jīng)驗(yàn)是只通過ID來標(biāo)識(shí)復(fù)雜的組件（“molecules,” “organisms”），并且不要在CSS中使用這些ID。比如，你可以在你的登錄表單組件中標(biāo)識(shí)#login，不需要在CSS中有元素、屬性或者流式布局樣式的地方使用#login，即使你可能發(fā)現(xiàn)你構(gòu)造了一個(gè)或兩個(gè)通用的utility classes可以用到其他的組件上。

如果你使用了#login，那這只能影響到特定的組件。這提醒了你已經(jīng)偏離了開發(fā)一個(gè)設(shè)計(jì)系統(tǒng)，而朝著大量冗長(zhǎng)代碼的工作前進(jìn)。

當(dāng)我告訴大家我不采用BEM這樣的方法或者CSS modules這樣的工具，許多人會(huì)認(rèn)為我是這樣寫CSS的：

然而并不是的。這里已經(jīng)闡述了一個(gè)明確的過度規(guī)范，我們需要小心去避免。就像BEM（OOCSS, SMACSS, atomic CSS等）并不是避免復(fù)雜、難以控制的CSS的唯一方法。

為了解決優(yōu)先級(jí)問題，很多的方法都是引入了類選擇器。這樣帶來的麻煩是導(dǎo)致一串冗余的類：讓結(jié)構(gòu)變得更加臃腫的奇異的代碼——不會(huì)注意到文檔——會(huì)使進(jìn)入到這個(gè)系統(tǒng)工程中的新的開發(fā)者感到困惑。

通過大量地使用類，你可以讓你的樣式文件最大化地和HTML系統(tǒng)分離。這不適合“關(guān)注點(diǎn)分離”，會(huì)導(dǎo)致冗長(zhǎng)或者更糟的代碼，導(dǎo)致不可訪問性：它可能在不影響可訪問性狀態(tài)的情況下影響視覺樣式：

除了大量的編寫和使用類之外，我看到了下面這些方法：

利用繼承建立一致性的前置條件；

用最多的元素和屬性選擇器來支持透明的、標(biāo)準(zhǔn)的基礎(chǔ)組件；

利用簡(jiǎn)單的流式布局系統(tǒng)；

結(jié)合一些通用的utility classes來解決被多元素影響的布局問題。

所有這些方法對(duì)于創(chuàng)造可設(shè)計(jì)系統(tǒng)，能夠更加容易地寫出新的界面組件，而讓成熟的項(xiàng)目可以更少地依賴新的CSS代碼。這并不是得益于嚴(yán)格的命名和封裝，反而是因?yàn)槿鄙偎鼈儭?/p>

即使你不是很習(xí)慣我這里推薦的這些方法，我也希望這篇文章至少能夠幫助你重新思考什么是組件。它們不是你隔離創(chuàng)造出來的。有時(shí)候，在標(biāo)準(zhǔn)的HTML元素下，它們也不是你創(chuàng)造的東西。通過組件組合越多的組件，你的界面就能夠以更少的CSS來實(shí)現(xiàn)高可訪問性，并擁有一致的視覺效果。

CSS沒有任何錯(cuò)。事實(shí)上，它明顯地讓你以更少的代碼做更多是事情。我們只是沒有充分利用它的優(yōu)點(diǎn)。

作者：Heydon Pickering
原文鏈接：https://www.smashingmagazine....