建站
咨詢
售后
建站咨詢
新聞中心
復(fù)雜的 CSS 架構(gòu)，可不是你在科班里能學(xué)到的東西。
我在互聯(lián)網(wǎng)行業(yè)的第四份工作，是在我國一家領(lǐng)先的媒體新聞公司中任職一名 CSS/HTML 專家，我的主要職責(zé)就是開發(fā)可重用的、可擴(kuò)展的、用于多網(wǎng)站的 CSS 架構(gòu)。
在本文中，我將與大家分享我在構(gòu)建多網(wǎng)站架構(gòu)領(lǐng)域中積累的知識和經(jīng)驗(yàn)。
附注：如今，正規(guī)的項目都會用到 CSS 預(yù)處理器。而在本文中，我會使用 Sass 預(yù)處理器。
用層構(gòu)建世界
在開始開發(fā)一個大型項目之前，我們應(yīng)該放眼全局，把多個網(wǎng)站的共同之處提煉出來。高樓大廈始于一磚一瓦，而項目的基石就是樣式規(guī)格化、混入（Mixins）、通用圖標(biāo)以及局部模塊層（元素、組件、圖形邏輯、實(shí)體、頁面……不一而足）等。
為了使多重項目（即多個網(wǎng)站）正常運(yùn)轉(zhuǎn)，我們必須決定哪些樣式是通用樣式、哪些是專有樣式 —— 通用樣式寫進(jìn)基礎(chǔ)層，而專有樣式寫在與其對應(yīng)的層中。這是一條充滿摸索和碰壁的實(shí)踐之路。每當(dāng)思考的角度發(fā)生變化，我們都需要逐層地挪動樣式代碼，直到我們覺得順眼為止，這都是家常便飯了。
理解了這項原則后，我們就可以開始著手構(gòu)建作為基礎(chǔ)的全局層了。這個全局層是整個多重項目（多個網(wǎng)站）的起始點(diǎn)。
下面的示例圖向我們演示了彼時我司的項目需求。
基礎(chǔ)層要保持輕量，其中只包含 CSS 初始化、基本的 SASS mixins、通用圖標(biāo)、通用字體（如需）以及功能類，如果某些網(wǎng)格布局適用于所有網(wǎng)站，就將其作為通用網(wǎng)格添加到基礎(chǔ)層中。在 _partials.scss 層（元素、組件等）中，我們主要用到的是 _elements.scss 層，該層中包含諸如通用彈窗、通用表單和通用標(biāo)題等此類局部模塊。我們應(yīng)該在基礎(chǔ)樣式中添加的是所有（或者大多數(shù)）底層樣式共有的部分。（更多關(guān)于文件夾和文件結(jié)構(gòu)的細(xì)節(jié)，參見我的上一篇文章）
如何組織多個層
在我們的架構(gòu)中，每個層都至少包含三個文件：兩個私有文件（局部樣式文件和配置文件，稱之為私有是因?yàn)樗鼈儾粫痪幾g成一個 CSS 文件）和一個公共文件（本層的主文件）。每層的配置文件 _config.scss 通常包含變量。_local.scss 文件則包含內(nèi)容樣式，為當(dāng)前層充當(dāng)控制器或者包管理器的角色。而第三個文件（layer-name.scss）會調(diào)用前二者。
layer-name.scss 文件：
@import "config";
@import "local";
另外一個我們要給自己定下的原則就是，盡可能把每個文件都拆分成盡可能小的部分（小文件）。這個原則會讓重構(gòu)非常方便。
在每一層中，都要保證只編譯 layer-name.scss 文件，即使某些層代表的是一個“虛擬項目”（如上面示例圖中的“基礎(chǔ)層框架”）。
對于不會被編譯成單獨(dú)文件的私有文件，我們用一個下劃線（_）作為其文件名的前綴。這里的下劃線代表著此文件不能單獨(dú)存在。
注意：當(dāng)導(dǎo)入私有文件時，我們書寫其文件名時可以不必帶上前綴下劃線。
層架構(gòu)示例：
文件夾結(jié)構(gòu)長這樣：
sass/
|
|- base-layer/
|- config/
|- local/
|- _config.scss
|- _local.scss
|- base-layer.css (編譯后的層樣式)
|- base-layer.scss
繼承
假設(shè)我們想要從基礎(chǔ)層開始創(chuàng)建一個項目。我們需要根據(jù) base-layer 文件夾的內(nèi)部結(jié)構(gòu)，用新項目的名稱照貓畫虎地克隆一套出來。在后續(xù)例子中，我們把這個新項目稱為 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";
內(nèi)容樣式文件 inherited-project/_local.scss 亦同理：
/ 導(dǎo)入 base-layer 局部組件/
@import "../base-layer/local.scss";
/ 局部字體/
@import "local/font-almoni.scss";
/ 局部組件/
@import "local/elements.scss";
@import "local/components.scss";
如果要創(chuàng)建的新層既有通用樣式又有獨(dú)特樣式，那么從 base-layer 文件夾繼承基礎(chǔ)層樣式再合適不過了。
這一層會創(chuàng)建一個名為 inherited-project.css 的 CSS 文件。
在內(nèi)部層中覆寫變量
使用“層”的方式覆寫變量非常簡單。
比方說在基礎(chǔ)層中有一個名為 $base-color 的變量，其值為 blue（$base-color: blue;）。要想覆寫此變量，就需要在局部文件 _config.scss 中更新它的值?，F(xiàn)在，所有使用該變量的組件 —— 不論是繼承于基礎(chǔ)層還是定義于局部層 —— 都會更新對應(yīng)變量的的顏色值。
Global Story 全局
某些模塊并非在所有層中都會用到，因此如果你在基礎(chǔ)層中定義它們，其他項目就會導(dǎo)入冗余代碼。為了解決這個問題，我走了另一條路線，采用了全局模塊的概念。
這個概念是說，把僅用于某些層的模塊放置于一個新的根目錄（_partials）中，這個新的根目錄位于所有層之外。然后，任何層都可以從全局目錄 _partials 中導(dǎo)入所需模塊。
下圖展示了將模塊分離的例子：
每一層都可以按需從全局目錄 _partials 中調(diào)用一個或多個模塊。
全局目錄 _partials 示例：
sass/
|
|- _partials/
|- base-layer/
|- inherited-project/
從 _partials 導(dǎo)入模塊的 local.scss 文件：
/ 導(dǎo)入 base-layer 中的局部組件/
@import "../base-layer/local.scss";
/ 局部組件/
@import "local/partials.scss";
/ 添加全局模塊/
@import "../_partials/last-connection";
些許額外忠告
組織結(jié)構(gòu)要有條理。要一直記得以滿足需求的方式規(guī)劃項目、保持最佳結(jié)構(gòu)。
別重蹈覆轍。僅用 @import 即可輕松導(dǎo)入另一層的組件。比如說，某些組件定義在一個“體育”項目中，而這些組件與另一個項目中的“新聞”網(wǎng)站有關(guān)聯(lián)。那我們就可以直接把這些組件 @import 進(jìn)“新聞”網(wǎng)站中。（網(wǎng)站 = 層 = 項目）
充分利用 IDE 快捷方式。選用一款便于重構(gòu)的編輯器，免于導(dǎo)致報錯或故障。
立新不可破舊。在開發(fā)和后續(xù)重構(gòu)中，每次都要把所有 Sass 根文件一同編譯，以免新舊脫節(jié)。
總結(jié)
在本文中，我向大家展示了針對多網(wǎng)站項目的 CSS 體系結(jié)構(gòu)的構(gòu)建方法，這套思想提煉于我經(jīng)年積累的知識和經(jīng)驗(yàn)。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站名稱：多網(wǎng)站項目的CSS架構(gòu)-創(chuàng)新互聯(lián)
本文路徑：http://fisionsoft.com.cn/article/gddhe.html
