[譯] 重建 slack.com

• 原文地址：Rebuilding slack.com: A redesign powered by CSS Grid and optimized for performance and accessibility.
• 原文做者：Mina Markham
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Raoul1996
• 校對者：IridescentMia、Usey95

重建 slack.com

使用 CSS Grid 從新設計，並針對性能和可訪問性進行了優化。

Alice Lee 的插圖。

在八月, 咱們從新設計了 slack.com,咱們想讓您稍微看下屏幕後面發生了什麼。重建咱們的營銷網站是一個通過各團隊、部門、機構仔細協調的大規模項目。

咱們從新設計網站的同時完全檢查了全部的底層代碼。咱們想要同時實現這樣的一些目標：提供一致的更新體驗的同時對網站的架構，代碼的模塊化，總體性能和可訪問性進行大改。這將爲公司的幾個重大事宜提供新的基礎，包括國際化。

Slack.com (從上到下: 2013 年 8 月, 2017 年 1 月, 2017 年 8 月)

更乾淨、精簡的代碼

舊的 slack.com 和咱們基於 web 的 Slack 客戶端共享了不少代碼和資源依賴。咱們的目標之一就是將網站和 「web app」 解耦，以簡化咱們的代碼庫。經過只包含咱們運行 slack.com 所須要的資源的方式，能夠提升站點的穩定性，減小開發人員的困惑，建立一個更容易迭代的代碼庫。這項工做的基本部分之一就是建立咱們新的UI框架，名爲 :spacesuit: 👩🏾‍🚀。

:spacesuit: 框架包含基於類(class)的可重用組件和用於標準化咱們營銷頁面的工具類。它下降了咱們的 CSS 載荷，在一種狀況降低低了近70%(從 416kB 下降至 132kB).

其餘有意思的數據：

• 聲明數量從 1,881 降至 799
• 顏色數量從 91 降至 14
• 選擇器數量從 2,328 降至 1,719

重建以前：大量的波動代表 CSS 特異性管理不善。

重建以後：使用大部分基於類的系統致使咱們的特異性降低。

咱們的 CSS 是基於 ITCSS 理念 組織的，而且使用 相似 BEM 命名規範。選擇器使用單個字母做爲前綴來指定類表示的類型。前綴後面跟着組件的名稱以及組件的全部變體。舉個例子，u-margin-top--small 表示咱們用變量將 margin-top 設置爲比較小的數值的工具類。這樣的工具類是咱們系統不可或缺的部分，由於它容許咱們的開發者在不重寫大量 CSS 的狀況下微調 UI 片斷。另外，組件之間的距離是建立設計系統竅門之一。諸如 u-margin-top--small 這樣的工具類能夠建立一致的間距，讓咱們沒必要去重置或撤銷任何已經設置到組件上的間距。

加載時間減小了 53% 的訂價頁面是咱們最大的成果。

現代的響應式佈局

新網站使用 Flexbox 和 CSS Grid 的組合來建立響應式佈局。咱們想要使用 CSS 最新的特性，又但願那些使用較舊的瀏覽器的訪問者得到類似的體驗。

開始咱們嘗試使用 CSS Grid 實現傳統的 12 列網格佈局，可是最終沒有奏效。由於當網格是兩種的時候，咱們會把本身限制在單一的尺寸佈局上。最後咱們發現實際上並不須要基於列的網格。因爲 Grid 佈局容許你去建立自定義的網格來適配你全部的佈局，因此不須要強制 12 列網格。相反，咱們爲設計中一些常見的佈局模式建立了 CSS Grid 對象。

一些模式很簡單

經典的三列網格塊佈局

其餘更復雜的則真正展示了 Grid 的能力

照片拼貼對象

在實現咱們的網格以前，像上面這樣的佈局須要大量的包裝，有時使用空 div 來模仿一個二維網格。

<section class=」o-section」>
    <div class=」o-content-container」>
        <div class=」o-row」>
            <div class=」col-8">…</div> <div class=」col-4">…</div>
        </div>
        <div class=」o-row」>
            <div class=」col-1"></div> <div class=」col-3">…</div>
            <div class=」col-8">…</div> </div> </div> </section>複製代碼

使用 CSS Grid，咱們能夠刪除模擬網格所須要的額外標記，只須要在本地簡單的建立一個就好。使用 Grid 讓咱們可使用更少的標記。此外還確保咱們使用的標記是有語義的。

<section class=」c-photo-collage c-photo-collage--three」>
    <img src=」example-1.jpg」 alt=」」>
    <img src=」example-2.jpg」 alt=」」>
    <blockquote class=」c-quote」>
        <p class=」c-quote__text」>…</p>
    </blockquote>
    <img src=」example-3.jpg」 alt=」」>
</section>複製代碼

起初，咱們使用 Modernizr 來測試對網格的支持狀況。然而當庫加載時，致使了閃爍的無格式佈局。

當 Modernizr 檢測到網格支持的時候，頁面默認爲移動佈局並重排。

咱們認爲解決佈局切換時抖動的體驗比向後兼容更重要。折中方案是將 CSS Grid 做爲加強方案，當有須要時回退到 Flexbox 和其餘技術。
咱們使用了 CSS 功能查詢來檢測網格支持，而不是使用庫。不幸的是，並非每個瀏覽器都支持功能查詢。這就意味着只有能處理 @supports 規則的瀏覽器才能使用 CSS Grid 佈局。所以，IE11，即便支持某些網格功能，也將會使用基於 FLexBox 的佈局。

咱們使用一些目前還沒有在全部瀏覽器中徹底支持的 Grid 功能。最明顯的就是基於百分比的 grid-gap。儘管 Safari 的某些版本已經支持這個屬性，可是咱們仍然須要預見到它的缺失。在實踐中，Grid 對象的樣式以下：

@supports (display: grid) and (grid-template-columns: repeat(3, 1fr)) and (grid-row-gap: 1%) and (grid-gap: 1%) and (grid-column-gap: 1%) {
    .c-photo-collage {
        display: grid;
        grid-gap: 1.5rem 2.4390244%;
    }
    .c-photo-collage > :nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 1;
    }
    .c-photo-collage > :nth-child(2) {
        grid-column: 2;
        grid-row: 2;
    }
    .c-photo-collage > :nth-child(3) {
        grid-column: 4;
        grid-row: 1;
        align-self: flex-end;
    }
    .c-photo-collage > :nth-child(4) {
        grid-column: 3 / span 2;
        grid-row: 2 / span 2;
    }
};複製代碼

任何不符合查詢要求的瀏覽器將使用咱們的 FlexBox 回退方案

@supports not ((display: grid) and (grid-column-gap: 1%)) {
    /* fabulously written CSS goes here */
}複製代碼

流式排版

一旦咱們有響應式的佈局，咱們須要一樣適應性的排版。咱們使用了Less mixins 來幫助咱們微調排版。排版是一個能夠做爲全部排版設置單一來源的 mixin。對於每種類型的樣式，mixin中都會建立一個包含樣式名稱或者用途的新行，後跟每種類型樣式的設置列表。它們的順序是：font-family，min 和 max font-size (默認單位是rem)，line-height，font-weight，以及任何的 text-transforms。例如 uppercase。爲了清楚起見，每種類型名稱都以 display-as-做爲前綴，確保其目的明確。

下面是 mixin 的簡化版本：

.m-typeset(@setting) {
    @display-as-h1: @font-family-serif, 2, 2.75, 1.1, @font-semibold;
    @display-as-btn-text: @font-family-sans, .9, .875, 1.3, @font-bold, ~」uppercase」;
    font-family: extract(@@setting, 1);
    font-weight: extract(@@setting, 5);
    line-height: extract(@@setting, 4);
}複製代碼

看看它的做用：

.c-button { .m-typeset(「display-as-btn-text」); }複製代碼

這個 mixin 的邏輯須要一個參數，好比 display-as-btn-text，而且會從列表中提取每一個屬性指定的索引。在這個例子中，line-height 屬性將設置爲1.3，由於它是第4個索引值。因此產生的 CSS 將是

.c-button {
    font-family: ‘Slack-Averta’, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}複製代碼

美術指導 & 意象(imagery)

Alice Lee 爲咱們提供了一些漂亮的插圖，咱們想要確保咱們儘量好的展出他們。有時想要根據視口(viewport)寬度來顯示不一樣版本的圖像。咱們在視網膜(retina)和非視網膜(non-retina)資源之間進行切換，對特定的屏幕寬度進行圖像調整。

這個過程也成爲 美術指導(art direction),經過使用 Picturefill 的 picture 和 source 元素做爲舊版瀏覽器的 polyfill。例如設備尺寸，設備分辨率，方向等定義的特徵可讓咱們在設計時規定顯示不一樣的圖像資源。

咱們的功能頁面使用 srcset 來顯示基於視口大小的不一樣圖像。

藉助這些工具，咱們可以根據咱們設置的查詢參數來顯示資源的最佳版本。在上面的例子中，小視口須要更簡單的首圖(hero image)。

<picture class=」o-section__illustration for-desktop-only」>
    <source srcset=」/img/features/information/desktop/hero.png」 sizes=」1x, 2x」 media=」(min-width: 1024px)」 alt=」」>
    <img srcset=」/img/features/information/mobile/hero.png」 sizes=」1x, 2x」 alt=」」>
</picture>複製代碼

這種技術使咱們可以爲特定的媒體查詢顯示指定的圖片資源，以及須要的是視網膜仍是非視網膜資源。最終的結果是在整個網站上良好的美術指導。

兼容, 從頭開始

另外一個主要的目標就是確保低視力用戶，屏幕閱讀器用戶和鍵盤用戶能夠輕鬆的瀏覽網站。從一個乾淨的代碼庫開始，咱們用少許額外的工做就能在顏色的對比，HTML 的語義化和鍵盤的可訪問性上作出不少有效的改進。此外，咱們還可以使用一些新功能來得到更好的訪問體驗。咱們在導航前面添加了跳過連接，以便用戶能夠根據須要繞過菜單。爲了得到更好的屏幕閱讀體驗，咱們添加了aria-live 區域 和輔助函數來報告表單錯誤和路由更改。此外，在交互鍵盤可訪問和明顯的焦點狀態上，咱們也努力使用清晰，描述性的替代文字(alt text)。

期待

在得到更好性能，可維護性和可訪問性上，老是有不少的勝利。咱們正在改進咱們站點的遙測(telemetry)，以更好的瞭解瓶頸所在，以及咱們能夠在哪些方面發揮最大的影響力。咱們爲本身取得的進步感到驕傲。咱們但願爲世界各地的客戶創造更愉快的體驗。

---

感謝 Matt Haughey。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。