Supercool，一家快速發(fā)展的網(wǎng)頁(yè)設(shè)計(jì)公司，為藝術(shù)客戶創(chuàng)建定制網(wǎng)站，并使用現(xiàn)成的Craft CMS系統(tǒng)；它具有高規(guī)格的圖形設(shè)計(jì)，以及相對(duì)苛刻的排版和藝術(shù)指導(dǎo)。在過(guò)去的幾個(gè)月里，我們一直在轉(zhuǎn)向CSS Grid。我們正在緩慢過(guò)渡，允許自己發(fā)現(xiàn)新的范例和設(shè)計(jì)方法，而不是簡(jiǎn)單地將舊習(xí)慣移植到新的語(yǔ)法中。

到目前為止，我們已經(jīng)開(kāi)發(fā)出了一些非常有用的策略來(lái)跟蹤布局。我已經(jīng)編寫(xiě)了一些非常巧妙的mixin，使用了命名區(qū)域和模板，并且我們已經(jīng)找到了一些基本約定來(lái)創(chuàng)建高度可讀的代碼。我認(rèn)為，逐步講解使用grid的單個(gè)主要組件的完整生產(chǎn)實(shí)現(xiàn)，深入探討它提出的一些設(shè)計(jì)問(wèn)題，并引導(dǎo)您避免我們遇到的陷阱，將非常有價(jià)值。CSS Grid是一個(gè)大型規(guī)范，有很多可能的方法和很多正確的方法，但在某個(gè)時(shí)刻，您必須確定您的方法并使其上線。

我期望您對(duì)CSS、Sass、BEM有一定的了解，并且對(duì)在緊迫的時(shí)間表（例如一周）內(nèi)，使用Sketch或Photoshop類型的文檔，原型化完全實(shí)現(xiàn)的、可訪問(wèn)的、自定義框架（包含50多個(gè)組件）的任務(wù)感興趣。

首先，讓我們識(shí)別并分離出設(shè)計(jì)中的不同編碼任務(wù)，并規(guī)劃我們將如何處理它們：

1. 字體: 設(shè)計(jì)師已經(jīng)定義了一個(gè)字體系統(tǒng)。
2. 顏色: 首先，我們構(gòu)建一個(gè)主題模型，然后將其包含在部分中。
3. 內(nèi)容: 此塊中包含哪些元素？它的變體是什么？這就是我們的BEM mixin發(fā)揮作用的地方。
4. 布局: 這就是內(nèi)容在此塊中的放置方式。您可能希望直接跳到此步驟。
5. 約定: 這正是我們選擇編寫(xiě)上述所有內(nèi)容的方式。CSS中有很多正確答案，因此重要的是我們都同意一個(gè)約定，即規(guī)則。這確實(shí)應(yīng)該排在第一位，但為了本文的緣故，我們將在最后總結(jié)。

字體系統(tǒng)

我們使用實(shí)用程序類（例如h-text--h1、h-text--badge）來(lái)設(shè)置字體樣式。一個(gè)項(xiàng)目中可能有一百種字體樣式。我們使用Typex將這些樣式從Sketch直接導(dǎo)出到我們的Patternlab中。這本身就是另一篇文章的內(nèi)容，所以讓我們假設(shè)字體已經(jīng)處理完畢。我們不會(huì)將字體引入我們的組件部分。

顏色使用

主題化只需添加幾個(gè)微小的mixin，因此理想情況下，我們不會(huì)在部分中看到大量的顏色規(guī)則。我們將它們?nèi)看鎯?chǔ)在“Mixin和模型”庫(kù)中的_themer.scss部分中，這樣我們可以確保遵循網(wǎng)站的設(shè)計(jì)系統(tǒng)。這樣，當(dāng)有人稍后返回構(gòu)建時(shí)，他們就有一個(gè)關(guān)鍵的參考部分來(lái)描述設(shè)計(jì)和品牌規(guī)則。當(dāng)在大致相同的市場(chǎng)中構(gòu)建和維護(hù)許多網(wǎng)站時(shí)——但每個(gè)網(wǎng)站都有不同的品牌規(guī)格——您必須確保不會(huì)將一個(gè)品牌與另一個(gè)品牌混淆！因此，與字體一樣，我們將顏色規(guī)則從部分中抽象出來(lái)。從本質(zhì)上講，在我們的_header.scss文件中，我們實(shí)際上只關(guān)注布局（盡可能多）。

鑒于我們同意始終使用我們的mixin進(jìn)行主題化，這就是如何在元素上包含它的方式：

<code>@include var($property, $value);</code>

然后，我們將設(shè)置一個(gè)主題模型，說(shuō)明顏色在此特定網(wǎng)站上的工作方式，并將其應(yīng)用于組件：

<code>@include theme;</code>

這是我們將與此頁(yè)面標(biāo)題一起使用的示例主題模型。它非常簡(jiǎn)單。

我們將顏色與黑色或白色配對(duì)。我們依賴于對(duì)比度規(guī)則，并為強(qiáng)調(diào)它們進(jìn)行翻轉(zhuǎn)，可能是在事件（如懸停）或突出顯示的號(hào)召性用語(yǔ)上。這就是我們實(shí)現(xiàn)這一目標(biāo)所需做的全部工作，現(xiàn)在我們有了關(guān)于顏色在此網(wǎng)站上實(shí)際工作方式的文檔。如果我們需要調(diào)試或擴(kuò)展UI，我們可以訪問(wèn)并檢查它。

我們還希望準(zhǔn)備繼承以幫助我們，因此讓我們確定一些有用的約定：

• 在您的管道中將SVG圖標(biāo)的填充設(shè)置為currentColor（順便說(shuō)一句，在CSS中默認(rèn)大小為width: 1em; height: 1em; font-size: inherit;）。
• 在基礎(chǔ)處設(shè)置<a></a>為currentColor。
• 編寫(xiě)簡(jiǎn)寫(xiě)，繼承邊框（例如1px solid或1px solid currentColor）。

使用此主題模型，我們可以生成任意數(shù)量的主題，也許將它們存儲(chǔ)為實(shí)用程序類，或者在組件內(nèi)循環(huán)遍歷修飾符列表，或者只允許用戶直接在CMS中的塊上設(shè)置變量。當(dāng)IE 11在我們統(tǒng)計(jì)數(shù)據(jù)中的占比低于1%時(shí)，我們可以使用變量做更多的事情，但這對(duì)于我們目前的用途來(lái)說(shuō)已經(jīng)足夠了。

讓我們不要偏離主題。Grid怎么樣？！

內(nèi)容組件

Grid讓我們能夠以一種新的方式精確地描述每個(gè)部分中我們擁有的內(nèi)容。對(duì)于為每個(gè)項(xiàng)目構(gòu)建新UI的設(shè)計(jì)機(jī)構(gòu)來(lái)說(shuō)，這確實(shí)是一個(gè)改變游戲規(guī)則的東西，并且在我們探索的過(guò)程中，我們正在發(fā)現(xiàn)它的新（且有趣）的應(yīng)用。

為了提供上下文：我們使用Craft CMS為我們的客戶定制每個(gè)界面，并創(chuàng)建自定義字段以滿足他們的特定需求和他們的內(nèi)容模型。我們擁有內(nèi)部工具，可以從票務(wù)API中提取事件并從中創(chuàng)建條目，然后可以在CMS中編輯和擴(kuò)展這些條目（或完全創(chuàng)建）?？蛻艨梢栽谟谰庙?yè)面區(qū)域中填寫(xiě)或編輯命名字段，并且還可以將整個(gè)設(shè)計(jì)好的、品牌的塊添加到每個(gè)頁(yè)面的布局中，因?yàn)樗麄冋跇?gòu)建它們。

有很多UI?？蛻魧?duì)內(nèi)容有很大的控制權(quán)，而我們對(duì)HTML有很大的控制權(quán)，因此我們可以確保頁(yè)面上具有高質(zhì)量的可訪問(wèn)的語(yǔ)義代碼。我們?cè)诎l(fā)現(xiàn)過(guò)程中共同開(kāi)發(fā)內(nèi)容模型，然后讓他們自由創(chuàng)建內(nèi)容。他們添加他們想要的內(nèi)容，我們確保它有效并且始終看起來(lái)正確。比正確更好！超級(jí)。（對(duì)不起！:P）

因此，作為一名開(kāi)發(fā)人員，我必須權(quán)衡相互競(jìng)爭(zhēng)的優(yōu)先事項(xiàng)：

• 可訪問(wèn)性、可用性
• 品牌和圖形設(shè)計(jì)
• 性能
• 維護(hù)和代碼庫(kù)健康

讓我們逐一查看它們：

可訪問(wèn)性

可訪問(wèn)的、邏輯的HTML是我的最愛(ài)。至少，我的項(xiàng)目需要在Lighthouse評(píng)分中獲得綠色可訪問(wèn)性評(píng)分。（我在開(kāi)玩笑，我想要那個(gè)美味的100?。┖诵穆窂胶晚?yè)面使用一些屏幕閱讀器（鍵盤選項(xiàng)卡、鍵盤導(dǎo)航）、低視力模擬器、Dasher、語(yǔ)音訪問(wèn)和二進(jìn)制開(kāi)關(guān)進(jìn)行測(cè)試。（我還為Robots and Cake工作，所以這是我開(kāi)發(fā)工作的重要組成部分。）我一遍又一遍地將巨大的可點(diǎn)擊電話號(hào)碼和電子郵件地址添加到頁(yè)面中。我只是想讓人們到達(dá)他們想去的地方。

我一直擔(dān)心內(nèi)容可以通過(guò)grid（以及flexbox）重新排序的方式?，F(xiàn)在我已經(jīng)完成了幾個(gè)構(gòu)建，我實(shí)際上認(rèn)為grid可以幫助我們解決這個(gè)問(wèn)題。使用CSS Grid，沒(méi)有理由為了布局而移動(dòng)HTML。我們可以回到將整個(gè)文檔視為邏輯的線性序列作為我們首要關(guān)注點(diǎn)。

品牌與性能與維護(hù)

藝術(shù)場(chǎng)所需要高規(guī)格的圖形設(shè)計(jì)，在印刷品和網(wǎng)絡(luò)上統(tǒng)一，并且需要不斷更改的材料（例如節(jié)目、手冊(cè)、門票、海報(bào)、微型網(wǎng)站等）來(lái)向他們的觀眾分發(fā)，包括必須滿足的合同營(yíng)銷義務(wù)。正如您所能想象的，我們有很多高質(zhì)量的大圖像需要優(yōu)先處理，并且通常帶有強(qiáng)大的以印刷為主導(dǎo)的品牌。這意味著我們可能需要向頁(yè)面提供大約十五種自定義字體（包括粗細(xì)變化、顯示字體等）以及復(fù)雜的CSS。我們必須讓自己盡可能精簡(jiǎn)。我們目前正在發(fā)送大約20 KB nano Gzipped的CSS，但我正在努力進(jìn)一步減少它。

但是，我們確實(shí)通過(guò)在PostCSS任務(wù)中將reduce標(biāo)識(shí)符設(shè)置為false來(lái)保持grid區(qū)域名稱的完整長(zhǎng)度。在DevTools中擁有可用的布局圖比節(jié)省那些少量字節(jié)更有用。為了維護(hù)、自文檔化以及您未來(lái)在Sowerby Bridge的一列延誤的火車上沒(méi)有repo訪問(wèn)權(quán)限的情況下調(diào)試此網(wǎng)站的未來(lái)的自己的緣故：保留地圖。

代碼健康

平衡所有這些相互競(jìng)爭(zhēng)需求的方法是闡明并達(dá)成約定，以便在測(cè)試中需要修復(fù)的內(nèi)容更少，并且已解決的問(wèn)題保持解決。我們檢查我們構(gòu)建的所有組件，并確保它們始終以標(biāo)題開(kāi)頭，鏈接指向位置，按鈕觸發(fā)操作，可計(jì)數(shù)的對(duì)象作為列表交付并在前面加上地標(biāo)標(biāo)題，導(dǎo)航是<nav></nav>，時(shí)間是<time></time>，div湯是早餐——基礎(chǔ)知識(shí)。

使用CSS Grid，沒(méi)有理由為了布局而移動(dòng) HTML。您的內(nèi)容始終可以邏輯地流動(dòng)，而布局更改則發(fā)生在CSS中。并且，由于不需要邊距或填充來(lái)創(chuàng)建間距，您可以簡(jiǎn)單地聲明：

<code>.o-grid .o-grid { width:100%; }</code>

……以確保任意數(shù)量的嵌套組在視覺(jué)上都占據(jù)相同的頁(yè)面網(wǎng)格。HTML可以更清晰地指導(dǎo)事物真正是什么：更接近文檔。

在標(biāo)題和操作之間有很多內(nèi)容需要管理，我的挑戰(zhàn)是跟蹤所有這些組件中的所有這些字段，同時(shí)確保我忠實(shí)地執(zhí)行設(shè)計(jì)規(guī)范，使其可遍歷、可掃描、可線性化并易于以某種邏輯的、可理解的方式讀取。

讓我們引入我的第一個(gè)、令人驚訝的有用的grid mixin。

<code>@mixin template($elements...) {
  @each $element in $elements {
    &__#{$element} {
      grid-area: $element;
    }
  }
}</code>

在任何地方使用此mixin意味著：

1. 每個(gè)組件部分現(xiàn)在都以其所有可能的元素列表開(kāi)頭，這是一個(gè)非常方便的文檔，尤其是在Twigging實(shí)際前端組件時(shí)。
2. mixin負(fù)責(zé)分配grid區(qū)域。
3. 元素和組件名稱在Sketch、CSS和HTML中保持一致，任何不一致之處都將非常明顯，因?yàn)椴季謱⑹?。我態(tài)度堅(jiān)定，但公平。
4. BEM命名會(huì)自動(dòng)強(qiáng)制執(zhí)行，但不會(huì)在部分中弄亂事情。

現(xiàn)在，在部分中，我們將只聲明grid-template-areas，使用普通的英語(yǔ)單詞，為我們提供一系列布局地圖，這些地圖也與數(shù)據(jù)庫(kù)字段匹配。超級(jí)易讀！

以下是如何使用此mixin的示例：

我們決定堅(jiān)持使用命名區(qū)域進(jìn)行內(nèi)部網(wǎng)格，因?yàn)槲以谶@個(gè)網(wǎng)站上讀到一篇很棒的文章，解釋了如果您堅(jiān)持使用列出的受支持屬性，Autoprefixer 如何處理IE 11的grid——并且它在大多數(shù)情況下確實(shí)如此。如果您在瀏覽器測(cè)試中使用應(yīng)用了Autoprefixer的超級(jí)有用的調(diào)試模式查看此測(cè)試用例，您將看到它正在工作。

但是有陷阱！您必須將內(nèi)聯(lián)元素設(shè)置為塊以確保它們始終在IE 11中作為grid單元操作。注釋掉示例中的標(biāo)記行以查看否則會(huì)發(fā)生什么：

哎喲！小心那些塊。您可能會(huì)發(fā)現(xiàn)某些版本的IE 11甚至不會(huì)拾取此修復(fù)程序，在這種情況下，您可能會(huì)嘗試只使用普通的<div>標(biāo)簽……嘆息。 <p>我沒(méi)有在此mixin中包含<code>display: grid，因?yàn)樵谀承┣闆r下，實(shí)際的grid是在內(nèi)部容器上設(shè)置的，例如，但我們?nèi)匀幌Ｍ鹓rid-areas與正確的BEM類匹配。

所以：

<code>.c-header{ 
  @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search);
}</code>

讓我們來(lái)布局這些東西。

布局

讓我們確定一些額外的規(guī)則，以確保此組件可以輕松滑入頁(yè)面布局。在撰寫(xiě)本文時(shí)，沒(méi)有可用的子網(wǎng)格（但會(huì)有?。?，因此此組件不知道它所在的父網(wǎng)格。這恰好與BEM組件方法很好地匹配——因?yàn)槊總€(gè)組件都是扁平的、孤立的，以限制繼承。我在這里不是提倡BEM（或者我們顯然使用的BEM-ish）——我只是說(shuō)，如果您已經(jīng)在使用它，這是一個(gè)額外的好處。

在此示例中，設(shè)計(jì)師設(shè)置了一個(gè)頁(yè)面布局，該布局具有12列網(wǎng)格和20px（1.25rem）間距，全站范圍內(nèi)，沒(méi)有偏移部分。我們的組件是一個(gè)頁(yè)面區(qū)域，將占據(jù)所有12個(gè)網(wǎng)格列。在這個(gè)過(guò)渡時(shí)期，我們?nèi)栽谑褂眠@種類型的設(shè)置網(wǎng)格，因?yàn)槲覀冇泻芏嗳匀换谶@個(gè)想法的系統(tǒng)需要與之集成。因此，這是此條件下的約定：對(duì)于全寬區(qū)域，刪除網(wǎng)格間隙并將網(wǎng)格模板列寫(xiě)為12的分?jǐn)?shù)單位（fr）。

這樣做意味著：

1. 此內(nèi)部網(wǎng)格的視線大致遵循其所在的網(wǎng)格；
2. 輕松查看代碼中的底層設(shè)計(jì)規(guī)則；以及
3. 如果需要，可以輕松地將事物精確地對(duì)齊。

關(guān)于“對(duì)齊”的快速說(shuō)明

等等……我的意思是“精確對(duì)齊”是什么意思？它難道不是已經(jīng)精確對(duì)齊了嗎？

嗯，不是。分?jǐn)?shù)單位方法完美地劃分空間，因此您最終會(huì)進(jìn)入間距。兩列均勻的列會(huì)讓您位于間距的中間。其中一列為2/3而另一列為1/3的兩列將在該間距的1/3處分割，依此類推。

修復(fù)對(duì)齊并不難，因?yàn)槲覀冎理?yè)面網(wǎng)格間距的寬度。例如，在均勻分割上，我們可以包含網(wǎng)格間隙。

但是，我們不能對(duì)任何其他分割這樣做。我們可以做的是將該間隙添加為邊距——無(wú)論您設(shè)置了什么盒大小，邊距都會(huì)在內(nèi)部添加。在此示例中，我們有三列（兩個(gè)命名區(qū)域和一個(gè)空空間），將我們的間距分成三份：

這就是計(jì)算這些邊距的方法：確保fr單位的總和結(jié)果為12。將網(wǎng)格間隙除以父網(wǎng)格中的列數(shù)，然后像這樣相乘：

n的右邊距乘數(shù)等于n右側(cè)fr單位的總和。n的左邊距等于n左側(cè)fr單位的總和。

因此，對(duì)于grid-template-columns值為2fr 3fr 2fr 4fr 1fr：

<code> 2      3      2     4    1 
0/10   2/7    5/5   7/1  11/0</code>

如果您發(fā)現(xiàn)自己經(jīng)常編寫(xiě)calc()，您甚至可以將其編寫(xiě)為mixin。例如，以下是如何將內(nèi)部網(wǎng)格與父網(wǎng)格對(duì)齊：

……以及以下是如何在名稱在內(nèi)部指定但數(shù)字在網(wǎng)格外指定時(shí)自動(dòng)計(jì)算邊距：

我相信您可以想到其他解決方案，例如切換到命名行，或添加額外的固定寬度列，甚至使用12個(gè)命名區(qū)域每行編寫(xiě)所有地圖。有很多方法可以處理這個(gè)問(wèn)題，但我認(rèn)為很多方法都消除了命名區(qū)域的優(yōu)勢(shì)。區(qū)域?yàn)槲覀兲峁┝艘粋€(gè)可讀的布局圖，其中包含我們未來(lái)的自己需要知道的內(nèi)容。它是代碼作為文檔。

需要明確的是，我正在引導(dǎo)我們解決的設(shè)計(jì)問(wèn)題不是對(duì)齊問(wèn)題。使用grid，對(duì)齊很容易。問(wèn)題不在于解決直接的、微不足道的布局問(wèn)題，而在于以一種支持我們目標(biāo)的方式解決它，即能夠在六個(gè)月后理解：

1. 組件中包含哪些元素。
2. 它們的布局方式。
3. 為什么代碼以這種方式編寫(xiě)。

grid規(guī)范非常龐大，很容易迷失在選項(xiàng)中。也許更好的計(jì)劃是重置為12列網(wǎng)格，并在需要絕對(duì)對(duì)齊時(shí)使用數(shù)字規(guī)范（即明確鏈接到我們的頁(yè)面網(wǎng)格，該網(wǎng)格使用數(shù)字規(guī)范）——但我確實(shí)覺(jué)得有一個(gè)更智能、更簡(jiǎn)單的解決方案有待發(fā)現(xiàn)。對(duì)于此網(wǎng)站，我們最終編寫(xiě)了一個(gè)頁(yè)面網(wǎng)格對(duì)象，并使用類向其添加了嵌套的內(nèi)部網(wǎng)格單元：.o-page-grid\_\_sidebar。

你們?cè)趺纯?？我肯定預(yù)見(jiàn)到對(duì)此會(huì)有不同的看法。??♀?

真實(shí)的grid！

我們可以使用它來(lái)創(chuàng)建一個(gè)通用的頁(yè)面標(biāo)題：

或者，我們可以創(chuàng)建一個(gè)主頁(yè)的變體：

那么，一個(gè)超出我們?nèi)萜鞯挠⑿蹣?biāo)題呢？當(dāng)然！或者我們也可以在容器外提供它：

接下來(lái)是什么？一個(gè)帶有全寬信息欄（粘貼）和一個(gè)與父網(wǎng)格上的側(cè)邊欄對(duì)齊的內(nèi)部按鈕的主題化事件標(biāo)題？沒(méi)錯(cuò)。我將包含一個(gè)父網(wǎng)格，以便更容易查看：

那么帶有居中對(duì)齊的搜索呢？讓我們使用折疊列技術(shù)：

以下是所有這些變體作為單個(gè)部分的演示。是的，它是一張地圖！它是一個(gè)包裝！

約定

哇，我們涵蓋了很多內(nèi)容！但是您可以看到像這樣的系統(tǒng)有多靈活和自文檔化，對(duì)吧？

1. 字體由單獨(dú)的字體系統(tǒng)處理。
2. 顏色由一個(gè)主題部分處理，該部分描述設(shè)計(jì)的底層顏色規(guī)則，而不是簡(jiǎn)單地臨時(shí)著色元素。
3. 元素被稱為它們是什么，用英語(yǔ)，并在部分頂部使用模板mixin作為列表包含。此列表可以作為參考包含在Twig或模板中。
4. 始終使用正確的HTML，并且嵌套不會(huì)破壞grid。這意味著您可以通過(guò)設(shè)置約定將任意數(shù)量的嵌套grid應(yīng)用于相同的布局空間。
5. 精確的對(duì)齊是在數(shù)字規(guī)范中完成的，而不是名稱規(guī)范（但請(qǐng)注意，可以使用名稱規(guī)范進(jìn)行對(duì)齊）。
6. 支持IE 11。

我還有一張快速說(shuō)明和另一個(gè)使用命名區(qū)域構(gòu)建的組件示例。在此示例中，卡片不是區(qū)域，而是放置在網(wǎng)格中的組件，因此沒(méi)有理由使用12的fr約定。您可以預(yù)期媒體對(duì)象部分如下所示：

<code>.c-card {
  &--news {
    align-content: start;
    grid-template-areas: 
      "image"
      "datetime"
      "title";
  }

  &--search {
    justify-content: start;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "image page"
      "image title"
      "image summary";
  }

  &--merchandise {
    grid-gap: 0;
    grid-template-columns: $b 1fr 1fr $b;
    grid-template-areas:
      "image image   image   image"
      ".     title   title   ."
      ".     summary summary ."
      ".     price   action  .";
  }

  &--donations {
    // donations thanks button is too long and must take up more space than input
    grid-gap: 0;
    grid-template-columns: $b 1fr 2fr $b;
    grid-template-areas:
      "image image   image   image"
      ".     title   title   ."
      ".     summary summary ."
      ".     input   action  .";
  }
}

// ...</code>