多網(wǎng)站項(xiàng)目的CSS架構(gòu)-創(chuàng)新互聯(lián)

復(fù)雜的 CSS 架構(gòu)，可不是你在科班里能學(xué)到的東西。

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

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

在本文中，我將與大家分享我在構(gòu)建多網(wǎng)站架構(gòu)領(lǐng)域中積累的知識(shí)和經(jīng)驗(yàn)。

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

用層構(gòu)建世界

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

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

理解了這項(xiàng)原則后，我們就可以開(kāi)始著手構(gòu)建作為基礎(chǔ)的全局層了。這個(gè)全局層是整個(gè)多重項(xiàng)目（多個(gè)網(wǎng)站）的起始點(diǎn)。

下面的示例圖向我們演示了彼時(shí)我司的項(xiàng)目需求。

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

如何組織多個(gè)層

在我們的架構(gòu)中，每個(gè)層都至少包含三個(gè)文件：兩個(gè)私有文件（局部樣式文件和配置文件，稱(chēng)之為私有是因?yàn)樗鼈儾粫?huì)被編譯成一個(gè) CSS 文件）和一個(gè)公共文件（本層的主文件）。每層的配置文件 _config.scss 通常包含變量。_local.scss 文件則包含內(nèi)容樣式，為當(dāng)前層充當(dāng)控制器或者包管理器的角色。而第三個(gè)文件（layer-name.scss）會(huì)調(diào)用前二者。

layer-name.scss 文件：

@import "config";
@import "local";
另外一個(gè)我們要給自己定下的原則就是，盡可能把每個(gè)文件都拆分成盡可能小的部分（小文件）。這個(gè)原則會(huì)讓重構(gòu)非常方便。

在每一層中，都要保證只編譯 layer-name.scss 文件，即使某些層代表的是一個(gè)“虛擬項(xiàng)目”（如上面示例圖中的“基礎(chǔ)層框架”）。

對(duì)于不會(huì)被編譯成單獨(dú)文件的私有文件，我們用一個(gè)下劃線（_）作為其文件名的前綴。這里的下劃線代表著此文件不能單獨(dú)存在。

注意：當(dāng)導(dǎo)入私有文件時(shí)，我們書(shū)寫(xiě)其文件名時(shí)可以不必帶上前綴下劃線。

層架構(gòu)示例：

文件夾結(jié)構(gòu)長(zhǎng)這樣：

假設(shè)我們想要從基礎(chǔ)層開(kāi)始創(chuàng)建一個(gè)項(xiàng)目。我們需要根據(jù) base-layer 文件夾的內(nèi)部結(jié)構(gòu)，用新項(xiàng)目的名稱(chēng)照貓畫(huà)虎地克隆一套出來(lái)。在后續(xù)例子中，我們把這個(gè)新項(xiàng)目稱(chēng)為 inherited-project。

提示：把所有的層目錄和項(xiàng)目目錄都放在 Sass 的根目錄中。

該項(xiàng)目至少包含一個(gè) _config.scss 文件、一個(gè) _local.scss 文件和此層的核心 Sass 文件 —— 在本例中即為 inherited-project.scss。

所有的層和項(xiàng)目都位于 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

項(xiàng)目 inherited-project 的配置文件引入了 base-layer 中的配置文件。這樣一來(lái)，我們就能增加新變量或者覆寫(xiě)上層（base-layer）中的已有變量了。

以下為 inherited-project/_config.scss 的一個(gè)例子：

/加載 base-layer 配置信息/
@import "../base-layer/config.scss";
/ 局部的 Config 層 (按需添加或覆寫(xiě)變量)/
@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";
如果要?jiǎng)?chuàng)建的新層既有通用樣式又有獨(dú)特樣式，那么從 base-layer 文件夾繼承基礎(chǔ)層樣式再合適不過(guò)了。

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

在內(nèi)部層中覆寫(xiě)變量

使用“層”的方式覆寫(xiě)變量非常簡(jiǎn)單。

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

Global Story 全局

某些模塊并非在所有層中都會(huì)用到，因此如果你在基礎(chǔ)層中定義它們，其他項(xiàng)目就會(huì)導(dǎo)入冗余代碼。為了解決這個(gè)問(wèn)題，我走了另一條路線，采用了全局模塊的概念。

這個(gè)概念是說(shuō)，把僅用于某些層的模塊放置于一個(gè)新的根目錄（_partials）中，這個(gè)新的根目錄位于所有層之外。然后，任何層都可以從全局目錄 _partials 中導(dǎo)入所需模塊。

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

每一層都可以按需從全局目錄 _partials 中調(diào)用一個(gè)或多個(gè)模塊。

全局目錄 _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ī)劃項(xiàng)目、保持最佳結(jié)構(gòu)。
別重蹈覆轍。僅用 @import 即可輕松導(dǎo)入另一層的組件。比如說(shuō)，某些組件定義在一個(gè)“體育”項(xiàng)目中，而這些組件與另一個(gè)項(xiàng)目中的“新聞”網(wǎng)站有關(guān)聯(lián)。那我們就可以直接把這些組件 @import 進(jìn)“新聞”網(wǎng)站中。（網(wǎng)站 = 層 = 項(xiàng)目）
充分利用 IDE 快捷方式。選用一款便于重構(gòu)的編輯器，免于導(dǎo)致報(bào)錯(cuò)或故障。
立新不可破舊。在開(kāi)發(fā)和后續(xù)重構(gòu)中，每次都要把所有 Sass 根文件一同編譯，以免新舊脫節(jié)。
總結(jié)

在本文中，我向大家展示了針對(duì)多網(wǎng)站項(xiàng)目的 CSS 體系結(jié)構(gòu)的構(gòu)建方法，這套思想提煉于我經(jīng)年積累的知識(shí)和經(jīng)驗(yàn)。

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

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

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

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

猜你還喜歡下面的內(nèi)容