初識 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 目錄保存所有的變數、函數、 混入 以及一些正常編譯需要的其它文件的定義。要想讓這個目錄物盡其用，把這個目錄下所有內容導入到 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 目錄，以便很容易找到模版，對這些文件你不必 拼接 、 壓縮 它們或者改變什麼。
現在樣式表已經差不多了，構建站點應該很簡單。
構建組件
或許對於模板語言你有自己的選擇，這取決於你的項目，有可能是 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 不會因這些需求而阻礙你！
結論
這只是一個關於如何在前端用 HTTP/2 構建項目的基本介紹，僅是皮毛而已。你可能注意到我上面所用的方法有的還有改進的空間。請不吝賜教！正如我在第一篇文章中所說的，HTTP/2 可能顛覆自 HTTP/1 以來我們所熟知的某些標準，所以要慎重思考和實踐，以便高效使用 HTTP/2 的開發環境。
via: https://www.viget.com/articles/getting-started-with-http-2-part-2
作者：Ben 譯者：GitFuture 校對：jasminepeng
本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive
對這篇文章感覺如何？
You may also like
More in:Linux中國
如何通過 VLC 使用字幕
Unix 桌面：在 Linux 問世之前
Valve 對於 Ubuntu 的 Snap 版本的 Steam 並不滿意：原因何在
Wine 9.0 發布，實驗性地加入了 Wayland 驅動
