57
初識 HTTP/2（二）
HTTP/2 時代的開啟為前端開發帶來了最佳體驗。
如果你對 HTTP/2 有所了解，那你可能用過它，或者至少想過怎樣能把它融入你的項目中。盡管有很多關於它如何改變工作流程，提高 Web 速度和效率等方麵的猜想，但最佳使用方式還沒有定下來。這裏我想講的就是我在之前的項目中所發現的 HTTP/2 的最佳實踐。
如果你還不確定什麼是 HTTP/2，或者為什麼它能改進你的工作，可以先看看我介紹背景方麵的第一篇文章。
記住：開始之前，我要告訴你，盡管你的瀏覽器可能支持 HTTP/2，但你的服務器可能不支持。檢查你的主機托管服務，看看他們是否提供 HTTP/2 的支持。否則你可能要建立你自己的服務器。這篇文章並不會涉及這方麵該如何做，但你可以查看 http2 github 頁麵，找一找這方麵的工具。
熱身工作
首先組織好你的文件。看一看下麵的文件樹結構，作為組織你的樣式表的起點：
/styles|── /setup| /* 變量、混入（minin）和函數 */|── /global| /* 能放在任何組件和部分中的可重用組件 */|── /components| /* 特殊組件和部分 */|── setup.scss // setup 樣式索引|── global.scss // 全局樣式索引
這會把你的樣式分到三個目錄下麵：setup、global 和 componenets。接下來我會說明這些目錄對你的項目有什麼用。
setup 目錄
setup 目錄保存所有的變量、函數、混入minin以及一些正常編譯需要的其它文件的定義。要想讓這個目錄物盡其用，把這個目錄下所有內容導入到 setup.scss 文件中是個很不錯的主意，這樣這個文件就會像下麵所展示的一樣：
/* setup.scss *//* 變量 */@import "setup/variables/colors";/* 混入 */@import "setup/mixins/color";/* 函數 */@import "setup/functions/color";... 等等
現在我們能快速引用這個站點中的所有定義，應該確保在所有的樣式文件頂部包含我們這裏創建的這個文件。
global 目錄
接下來的目錄，global 目錄，應該包含可在當前站點的多個部分或者每一個頁麵中重複使用的組件。像按鈕、文本、主要樣式，以及你的瀏覽器默認設置應該放在這裏。我不建議把頁麵的頭部或底部樣式放在這兒，因為某些項目中沒有頭部，或者不同頁麵頭部不同。而且，底部永遠是頁麵的最後一個元素，所以在用戶加載完當前站點的其它東西前，不必過分優先考慮加載底部樣式。
記住，如果沒有那些定義在 setup 目錄下的東西，你的 global 樣式就可能沒有作用，你的 global 文件看起來應該像這樣：
/* global.scss *//* 應用定義 */@import "setup";/* 全局樣式 */@import "global/reset";@import "global/buttons";@import "global/typography";@import "global/grid";... 等等
注意，首先要做的就是導入 setup 樣式。這樣的話，之後的文件都可以引用這個樣式裏的定義。
由於站點內的每個頁麵都需要 global 樣式，我們可以用典型的方式，在 <head> 標簽內用一個<link> 標簽來加載它們。你所看到的將是一個十分小巧的 css 文件，或者說理論上小巧的，這取決於你需要多少全局樣式。
最後，你的組件
注意，我沒有在上述目錄樹中的 components 目錄裏包含索引文件。這是 HTTP/2 所帶來的效用。直到現在，我們已經按照標準步驟構建了一個典型的站點，保持相當簡單的結構，僅選擇全局化那些最重要的樣式。組件充當它們自己的索引文件。
大多數開發者有獨特的組織組件的方式，因此我並不想影響你的策略。但是，你所有的組件看起來應該像這樣：
/* header.scss *//* 應用定義 */@import "../setup";header {// 樣式}... 等等
同樣的，你要把 setup 樣式包含進來，確保所有東西在編譯時都定義過。除了編譯這些文件，以及可能要把他們放到 /assets 目錄，以便很容易找到模版，對這些文件你不必 拚接concatenate、壓縮minify 它們或者改變什麼。
現在樣式表已經差不多了，構建站點應該很簡單。
構建組件
或許對於模板語言你有自己的選擇，這取決於你的項目，有可能是 Twig、Rails、Jade 或者 Handlebars。我認為考慮組件最好的方式是它是否有自己的模版文件，它該有個與名字相應的樣式。這樣你的項目中，模版和樣式的比例就會是個不錯的 1:1 的比例，而且你知道哪個文件有哪些東西，哪裏有哪個文件，因為它們的命名是有規律的。
現在它正步入正軌，用好 HTTP/2 的多種功能十分簡單，讓我們做一個模版：
{# header.html #}{# compiled header styles #}<link href="assets/components/header.css" rel="stylesheet" media="all"><header><h1>This Awesome HTTP/2 Site</h1>... 等等
非常好！在模版裏你可能有更簡單的方式鏈接到資源，但這裏顯示你所要做的僅是在開始構建時，在模版文件中鏈接一個小小的頭部樣式。這將允許你的站點僅僅加載特定資源到任意給定頁麵的組件中，而且，能夠設定頁麵從頭到腳的組件的優先級。
結合在一起
現在所有的組件都有結構，瀏覽器將會類似以下方式來渲染它們：
<!DOCTYPE html><html><head><link rel="stylesheet" media="all" href="/assets/global.css"></head><body><link rel="stylesheet" media="all" href="/assets/components/header.css"><header>... etc</header><link rel="stylesheet" media="all" href="/assets/components/title.css"><section class="title">... etc</section><link rel="stylesheet" media="all" href="/assets/components/image-component.css"><section class="image-component">... etc</section><link rel="stylesheet" media="all" href="/assets/components/text-component.css"><section class="text-component">... etc</section><link rel="stylesheet" media="all" href="/assets/components/footer.css"><footer>... etc</footer></body></html>
這是一個高級別方法，但你的項目中可能有調整的更細致的組件。例如，在頭部的 <nav> 組件可能要加載自己的樣式表。盡你所能地自由發揮，讓組件更有作用 - HTTP/2 不會因這些需求而阻礙你！
原文發布時間為：2017-01-13
本文來自雲棲社區合作夥伴“Linux中國”
最後更新：2017-05-31 10:31:53