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

創(chuàng)新互聯(lián)技術團隊10多年來致力于為客戶提供成都做網(wǎng)站、網(wǎng)站制作、品牌網(wǎng)站設計、營銷型網(wǎng)站、搜索引擎SEO優(yōu)化等服務。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗豐富的技術團隊，先后服務、推廣了數(shù)千家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機構單位。

我在互聯(lián)網(wǎng)行業(yè)的第四份工作，是在我國一家領先的媒體新聞公司中任職一名 CSS/HTML 專家，我的主要職責就是開發(fā)可重用的、可擴展的、用于多網(wǎng)站的 CSS 架構。

在本文中，我將與大家分享我在構建多網(wǎng)站架構領域中積累的知識和經(jīng)驗。

附注：如今，正規(guī)的項目都會用到 CSS 預處理器。而在本文中，我會使用 Sass 預處理器。

用層構建世界

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

為了使多重項目（即多個網(wǎng)站）正常運轉，我們必須決定哪些樣式是通用樣式、哪些是專有樣式 —— 通用樣式寫進基礎層，而專有樣式寫在與其對應的層中。這是一條充滿摸索和碰壁的實踐之路。每當思考的角度發(fā)生變化，我們都需要逐層地挪動樣式代碼，直到我們覺得順眼為止，這都是家常便飯了。

理解了這項原則后，我們就可以開始著手構建作為基礎的全局層了。這個全局層是整個多重項目（多個網(wǎng)站）的起始點。

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

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

如何組織多個層

在我們的架構中，每個層都至少包含三個文件：兩個私有文件（局部樣式文件和配置文件，稱之為私有是因為它們不會被編譯成一個 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
繼承

假設我們想要從基礎層開始創(chuàng)建一個項目。我們需要根據(jù) base-layer 文件夾的內部結構，用新項目的名稱照貓畫虎地克隆一套出來。在后續(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";
內容樣式文件 inherited-project/_local.scss 亦同理：

/ 導入 base-layer 局部組件/
@import "../base-layer/local.scss";
/ 局部字體/
@import "local/font-almoni.scss";
/ 局部組件/
@import "local/elements.scss";
@import "local/components.scss";
如果要創(chuàng)建的新層既有通用樣式又有獨特樣式，那么從 base-layer 文件夾繼承基礎層樣式再合適不過了。

這一層會創(chuàng)建一個名為 inherited-project.css 的 CSS 文件。

在內部層中覆寫變量

使用“層”的方式覆寫變量非常簡單。

比方說在基礎層中有一個名為 $base-color 的變量，其值為 blue（$base-color: blue;）。要想覆寫此變量，就需要在局部文件 _config.scss 中更新它的值?，F(xiàn)在，所有使用該變量的組件 —— 不論是繼承于基礎層還是定義于局部層 —— 都會更新對應變量的的顏色值。

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";
些許額外忠告

組織結構要有條理。要一直記得以滿足需求的方式規(guī)劃項目、保持最佳結構。
別重蹈覆轍。僅用 @import 即可輕松導入另一層的組件。比如說，某些組件定義在一個“體育”項目中，而這些組件與另一個項目中的“新聞”網(wǎng)站有關聯(lián)。那我們就可以直接把這些組件 @import 進“新聞”網(wǎng)站中。（網(wǎng)站 = 層 = 項目）
充分利用 IDE 快捷方式。選用一款便于重構的編輯器，免于導致報錯或故障。
立新不可破舊。在開發(fā)和后續(xù)重構中，每次都要把所有 Sass 根文件一同編譯，以免新舊脫節(jié)。
總結

在本文中，我向大家展示了針對多網(wǎng)站項目的 CSS 體系結構的構建方法，這套思想提煉于我經(jīng)年積累的知識和經(jīng)驗。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章名稱：多網(wǎng)站項目的CSS架構-創(chuàng)新互聯(lián)
分享URL：http://aaarwkj.com/article44/gddhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、企業(yè)建站、網(wǎng)頁設計公司、做網(wǎng)站、ChatGPT、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)