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)。在過去的幾個(gè)月裡，我們一直在轉(zhuǎn)向CSS Grid。我們正在緩慢過渡，允許自己發(fā)現(xiàn)新的範(fàn)例和設(shè)計(jì)方法，而不是簡(jiǎn)單地將舊習(xí)慣移植到新的語(yǔ)法中。

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

我期望您對(duì)CSS、Sass、BEM有一定的了解，並且對(duì)在緊迫的時(shí)間表（例如一周）內(nèi)，使用Sketch或Photoshop類型的文檔，原型化完全實(shí)現(xià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. 約定:這正是我們選擇編寫上述所有內(nèi)容的方式。 CSS中有很多正確答案，因此重要的是我們都同意一個(gè)約定，即規(guī)則。這確實(shí)應(yīng)該排在第一位，但為了本文的緣故，我們將在最後總結(jié)。

字體系統(tǒng)

我們使用實(shí)用程序類（例如h-text--h1、h-text--badge）來設(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)鍵的參考部分來描述設(shè)計(jì)和品牌規(guī)則。當(dāng)在大致相同的市場(chǎng)中構(gòu)建和維護(hù)許多網(wǎng)站時(shí)——但每個(gè)網(wǎng)站都有不同的品牌規(guī)格——您必須確保不會(huì)將一個(gè)品牌與另一個(gè)品牌混淆！因此，與字體一樣，我們將顏色規(guī)則從部分中抽像出來。從本質(zhì)上講，在我們的_header.scss文件中，我們實(shí)際上只關(guān)注佈局（盡可能多）。

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

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

然後，我們將設(shè)置一個(gè)主題模型，說明顏色在此特定網(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，我們可以訪問並檢查它。

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

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

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

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

內(nèi)容組件

Grid讓我們能夠以一種新的方式精確地描述每個(gè)部分中我們擁有的內(nèi)容。對(duì)於為每個(gè)項(xiàng)目構(gòu)建新UI的設(shè)計(jì)機(jī)構(gòu)來說，這確實(shí)是一個(gè)改變遊戲規(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ū)域中填寫或編輯命名字段，並且還可以將整個(gè)設(shè)計(jì)好的、品牌的塊添加到每個(gè)頁(yè)面的佈局中，因?yàn)樗麄冋跇?gòu)建它們。

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

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

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

讓我們逐一查看它們：

可訪問性

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

我一直擔(dān)心內(nèi)容可以通過grid（以及flexbox）重新排序的方式?，F(xiàn)在我已經(jīng)完成了幾個(gè)構(gòu)建，我實(shí)際上認(rèn)為grid可以幫助我們解決這個(gè)問題。使用CSS Grid，沒有理由為了佈局而移動(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)站等）來向他們的觀眾分發(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í)通過在PostCSS任務(wù)中將reduce標(biāo)識(shí)符設(shè)置為false來保持grid區(qū)域名稱的完整長(zhǎng)度。在DevTools中擁有可用的佈局圖比節(jié)省那些少量字節(jié)更有用。為了維護(hù)、自文檔化以及您未來在Sowerby Bridge的一列延誤的火車上沒有repo訪問權(quán)限的情況下調(diào)試此網(wǎng)站的未來的自己的緣故：保留地圖。

代碼健康

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

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

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

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

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

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

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

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

1. 每個(gè)組件部分現(xiàn)在都以其所有可能的元素列表開頭，這是一個(gè)非常方便的文檔，尤其是在Twigging實(shí)際前端組件時(shí)。
2. mixin負(fù)責(zé)分配grid區(qū)域。
3. 元素和組件名稱在Sketch、CSS和HTML中保持一致，任何不一致之處都將非常明顯，因?yàn)閬丫謱⑹　Ｎ覒B(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>我沒有在此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>

讓我們來佈局這些東西。

佈局

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

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

這樣做意味著：

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

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

等等……我的意思是“精確對(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ì)任何其他分割這樣做。我們可以做的是將該間隙添加為邊距——無論您設(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)常編寫calc() ，您甚至可以將其編寫為mixin。例如，以下是如何將內(nèi)部網(wǎng)格與父網(wǎng)格對(duì)齊：

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

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

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

1. 組件中包含哪些元素。
2. 它們的佈局方式。
3. 為什麼代碼以這種方式編寫。

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

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

真實(shí)的grid！

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

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

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

接下來是什麼？一個(gè)帶有全寬信息欄（粘貼）和一個(gè)與父網(wǎng)格上的側(cè)邊欄對(duì)齊的內(nèi)部按鈕的主題化事件標(biāo)題？沒錯(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。這意味著您可以通過設(shè)置約定將任意數(shù)量的嵌套grid應(yīng)用於相同的佈局空間。
5. 精確的對(duì)齊是在數(shù)字規(guī)範(fàn)中完成的，而不是名稱規(guī)範(fàn)（但請(qǐng)注意，可以使用名稱規(guī)范進(jìn)行對(duì)齊）。
6. 支持IE 11。

我還有一張快速說明和另一個(gè)使用命名區(qū)域構(gòu)建的組件示例。在此示例中，卡片不是區(qū)域，而是放置在網(wǎng)格中的組件，因此沒有理由使用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>