[譯] 多網站項目的 CSS 架構

• 原文地址：CSS Architecture for Multiple Websites
• 原文做者：Elad Shechter
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Baddyo
• 校對者：xionglong58，lgh757079506

多網站項目的 CSS 架構

CSS 架構 —— 第三部分

複雜的 CSS 架構，可不是你在科班裏能學到的東西。

我在互聯網行業的第四份工做，是在我國一家領先的媒體新聞公司中任職一名 CSS/HTML 專家，個人主要職責就是開發可重用的、可擴展的、用於多網站的 CSS 架構。

在本文中，我將與你們分享我在構建多網站架構領域中積累的知識和經驗。

附註：現在，正規的項目都會用到 CSS 預處理器。而在本文中，我會使用 Sass 預處理器。

本文是我寫的討論 CSS 架構的系列文章中的第三篇。建議你們最好先讀讀此係列的第二篇 —— 《CSS 架構：文件夾和文件結構》，有助於加深對本文的理解。

用層構建世界

在開始開發一個大型項目以前，咱們應該放眼全局，把多個網站的共同之處提煉出來。高樓大廈始於一磚一瓦，而項目的基石就是樣式規格化、混入（Mixins）、通用圖標以及局部模塊層（元素、組件、圖形邏輯、實體、頁面……不一而足）等。

爲了使多重項目（即多個網站）正常運轉，咱們必須決定哪些樣式是通用樣式、哪些是專有樣式 —— 通用樣式寫進基礎層，而專有樣式寫在與其對應的層中。這是一條充滿摸索和碰壁的實踐之路。每當思考的角度發生變化，咱們都須要逐層地挪動樣式代碼，直到咱們以爲順眼爲止，這都是屢見不鮮了。

理解了這項原則後，咱們就能夠開始着手構建做爲基礎的全局層了。這個全局層是整個多重項目（多個網站）的起始點。

下面的示例圖向咱們演示了彼時我司的項目需求。

基礎層要保持輕量，其中只包含 CSS 初始化、基本的 SASS mixins、通用圖標、通用字體（如需）以及功能類，若是某些網格佈局適用於全部網站，就將其做爲通用網格添加到基礎層中。在 _partials.scss 層（元素、組件等）中，咱們主要用到的是 _elements.scss 層，該層中包含諸如通用彈窗、通用表單和通用標題等此類局部模塊。咱們應該在基礎樣式中添加的是全部（或者大多數）底層樣式共有的部分。（更多關於文件夾和文件結構的細節，參見個人上一篇文章）

如何組織多個層

在咱們的架構中，每一個層都至少包含三個文件：兩個私有文件（局部樣式文件和配置文件，稱之爲私有是由於它們不會被編譯成一個 CSS 文件）和一個公共文件（本層的主文件）。每層的配置文件 _config.scss 一般包含變量。_local.scss 文件則包含內容樣式，爲當前層充當控制器或者包管理器的角色。而第三個文件（layer-name.scss）會調用前兩者。

layer-name.scss 文件：

@import "config";
@import "local";
複製代碼

另一個咱們要給本身定下的原則就是，儘量把每一個文件都拆分紅儘量小的部分（小文件）。這個原則會讓重構很是方便。

在每一層中，都要保證只編譯 layer-name.scss 文件，即便某些層表明的是一個「虛擬項目」（如上面示例圖中的「基礎層框架」）。

對於不會被編譯成單獨文件的私有文件，咱們用一個下劃線（_）做爲其文件名的前綴。這裏的下劃線表明着此文件不能單獨存在。

**注意：**當導入私有文件時，咱們書寫其文件名時能夠沒必要帶上前綴下劃線。

層架構示例：

文件夾結構長這樣：

sass/ 
 |
 |- base-layer/
     |- config/     
     |- local/
     |- _config.scss
     |- _local.scss
     |- base-layer.css  (編譯後的層樣式)
     |- base-layer.scss
複製代碼

繼承

假設咱們想要從基礎層開始建立一個項目。咱們須要根據 base-layer 文件夾的內部結構，用新項目的名稱照貓畫虎地克隆一套出來。在後續例子中，咱們把這個新項目稱爲 inherited-project。

提示：把全部的層目錄和項目目錄都放在 Sass 的根目錄中。

該項目至少包含一個 _config.scss 文件、一個 _local.scss 文件和此層的核心 Sass 文件 —— 在本例中即爲 inherited-project.scss。

全部的層和項目都位於 Sass 的根目錄中。

sass/ 
 |
 |- base-layer
 |   |- config/     
 |   |- local/
 |   |- _config.scss
 |   |- _local.scss
 |   |- base-layer.css  (編譯後的層樣式)
 |   |- base-layer.scss 
 |
 |- inherited-project
     |- config/     
     |- local/
     |- _config.scss
     |- _local.scss
     |- inherited-project.css  (編譯後的層樣式)
     |- inherited-project.scss
複製代碼

項目 inherited-project 的配置文件引入了 base-layer 中的配置文件。這樣一來，咱們就能增長新變量或者覆寫上層（base-layer）中的已有變量了。

如下爲 inherited-project/_config.scss 的一個例子：

/*加載 base-layer 配置信息 */
@import "../base-layer/config.scss";

/** 局部的 Config 層 (按需添加或覆寫變量)**/
@import "config/directions.scss";
複製代碼

內容樣式文件 inherited-project/_local.scss 亦同理：

/* 導入 base-layer 局部組件  */
@import "../base-layer/local.scss";

/* 局部字體 */
@import "local/font-almoni.scss";

/* 局部組件 */
@import "local/elements.scss";
@import "local/components.scss";
複製代碼

若是要建立的新層既有通用樣式又有獨特樣式，那麼從 base-layer 文件夾繼承基礎層樣式再合適不過了。

這一層會建立一個名爲 inherited-project.css 的 CSS 文件。

在內部層中覆寫變量

使用「層」的方式覆寫變量很是簡單。

比方說在基礎層中有一個名爲 $base-color 的變量，其值爲 blue（$base-color: blue;）。要想覆寫此變量，就須要在局部文件 _config.scss 中更新它的值。如今，全部使用該變量的組件 —— 不管是繼承於基礎層仍是定義於局部層 —— 都會更新對應變量的的顏色值。

Global Story 全局

某些模塊並不是在全部層中都會用到，所以若是你在基礎層中定義它們，其餘項目就會導入冗餘代碼。爲了解決這個問題，我走了另外一條路線，採用了全局模塊的概念。

這個概念是說，把僅用於某些層的模塊放置於一個新的根目錄（_partials）中，這個新的根目錄位於全部層以外。而後，任何層均可以從全局目錄 _partials 中導入所需模塊。

下圖展現了將模塊分離的例子：

每一層均可以按需從全局目錄 _partials 中調用一個或多個模塊。

全局目錄 _partials 示例：

sass/ 
 |
 |- _partials/ 
 |- base-layer/ 
 |- inherited-project/
複製代碼

從 _partials 導入模塊的 local.scss 文件：

/* 導入 base-layer 中的局部組件 */
@import "../base-layer/local.scss";

/* 局部組件 */
@import "local/partials.scss";

/* 添加全局模塊 */
@import "../_partials/last-connection";
複製代碼

些許額外忠告

• 組織結構要有條理。要一直記得以知足需求的方式規劃項目、保持最佳結構。
• 別重蹈覆轍。僅用 @import 便可輕鬆導入另外一層的組件。好比說，某些組件定義在一個「體育」項目中，而這些組件與另外一個項目中的「新聞」網站有關聯。那咱們就能夠直接把這些組件 @import 進「新聞」網站中。（網站 = 層 = 項目）
• 充分利用 IDE 快捷方式。選用一款便於重構的編輯器，免於致使報錯或故障。
• 立新不可破舊。在開發和後續重構中，每次都要把全部 Sass 根文件一同編譯，以避免新舊脫節。

總結

在本文中，我向你們展現了針對多網站項目的 CSS 體系結構的構建方法，這套思想提煉於我經年積累的知識和經驗。

本文是系列文章 CSS 架構文章新篇的第三篇，我會每隔幾周跟你們分享後續篇章。

若是以爲本文有趣，歡迎在 twitter 上或者 medium 上關注我。

個人 CSS 架構系列文章：

1. 規格化 CSS 仍是 CSS 重置？！
2. CSS 架構 —— 文件夾和文件架構
3. 多網站項目的 CSS 架構

結束語

好了，此次就分享到這裏。 衷心但願你們喜歡本文，並能從個人經驗中獲益一二。 若是你喜歡本文，請點贊並和你們分享你的心得，我將不勝感激。:-)

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

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