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

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

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

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

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

字體系統(tǒng)

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

顏色使用

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

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

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

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

<code>@include theme;</code>

這是我們將與此頁面標題一起使用的示例主題模型。它非常簡單。

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

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

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

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

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

內(nèi)容組件

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

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

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

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

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

讓我們逐一查看它們：

可訪問性

可訪問的、邏輯的HTML是我的最愛。至少，我的項目需要在Lighthouse評分中獲得綠色可訪問性評分。（我在開玩笑，我想要那個美味的100?。┖诵穆窂胶晚撁媸褂靡恍┢聊婚喿x器（鍵盤選項卡、鍵盤導(dǎo)航）、低視力模擬器、Dasher、語音訪問和二進制開關(guān)進行測試。（我還為Robots and Cake工作，所以這是我開發(fā)工作的重要組成部分。）我一遍又一遍地將巨大的可點擊電話號碼和電子郵件地址添加到頁面中。我只是想讓人們到達他們想去的地方。

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

品牌與性能與維護

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

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

代碼健康

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

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

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

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

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

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

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

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

1. 每個組件部分現(xiàn)在都以其所有可能的元素列表開頭，這是一個非常方便的文檔，尤其是在Twigging實際前端組件時。
2. mixin負責(zé)分配grid區(qū)域。
3. 元素和組件名稱在Sketch、CSS和HTML中保持一致，任何不一致之處都將非常明顯，因為布局將失敗。我態(tài)度堅定，但公平。
4. BEM命名會自動強制執(zhí)行，但不會在部分中弄亂事情。

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

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

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

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

哎喲！小心那些塊。您可能會發(fā)現(xiàn)某些版本的IE 11甚至不會拾取此修復(fù)程序，在這種情況下，您可能會嘗試只使用普通的<div>標簽……嘆息。 <p>我沒有在此mixin中包含<code>display: grid，因為在某些情況下，實際的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ī)則，以確保此組件可以輕松滑入頁面布局。在撰寫本文時，沒有可用的子網(wǎng)格（但會有?。虼舜私M件不知道它所在的父網(wǎng)格。這恰好與BEM組件方法很好地匹配——因為每個組件都是扁平的、孤立的，以限制繼承。我在這里不是提倡BEM（或者我們顯然使用的BEM-ish）——我只是說，如果您已經(jīng)在使用它，這是一個額外的好處。

在此示例中，設(shè)計師設(shè)置了一個頁面布局，該布局具有12列網(wǎng)格和20px（1.25rem）間距，全站范圍內(nèi)，沒有偏移部分。我們的組件是一個頁面區(qū)域，將占據(jù)所有12個網(wǎng)格列。在這個過渡時期，我們?nèi)栽谑褂眠@種類型的設(shè)置網(wǎng)格，因為我們有很多仍然基于這個想法的系統(tǒng)需要與之集成。因此，這是此條件下的約定：對于全寬區(qū)域，刪除網(wǎng)格間隙并將網(wǎng)格模板列寫為12的分數(shù)單位（fr）。

這樣做意味著：

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

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

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

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

修復(fù)對齊并不難，因為我們知道頁面網(wǎng)格間距的寬度。例如，在均勻分割上，我們可以包含網(wǎng)格間隙。

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

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

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

因此，對于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)格對齊：

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

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

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

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

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

你們怎么看？我肯定預(yù)見到對此會有不同的看法。??♀?

真實的grid！

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

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

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

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

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

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

約定

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

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

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

<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>