摘自蒂芙尼·布朗撰寫(xiě)的《CSS大師》一書(shū)節(jié)選。本書(shū)在全球各地書(shū)店有售，您也可以在此處購(gòu)買(mǎi)電子書(shū)版本。

CSS 文件組織

良好的 CSS 架構(gòu)的一部分在於文件組織。對(duì)於單人開(kāi)發(fā)者或非常小的項(xiàng)目來(lái)說(shuō)，單體文件就足夠了。對(duì)於大型項(xiàng)目——擁有多個(gè)佈局和內(nèi)容類型，或多個(gè)品牌共用同一設(shè)計(jì)框架的網(wǎng)站——使用模塊化方法並將 CSS 分割到多個(gè)文件中更明智。

將 CSS 分割到多個(gè)文件中，可以更輕鬆地將任務(wù)分配給團(tuán)隊(duì)。一個(gè)開(kāi)發(fā)者可以負(fù)責(zé)與排版相關(guān)的樣式，而另一個(gè)開(kāi)發(fā)者可以專注於開(kāi)發(fā)網(wǎng)格組件。團(tuán)隊(duì)可以合理地分配工作，提高整體生產(chǎn)力。

那麼，將 CSS 分割到多個(gè)文件的良好文件結(jié)構(gòu)可能是什麼樣的呢？以下是一個(gè)類似於我在近期項(xiàng)目中使用的結(jié)構(gòu)：

• reset.css：重置和規(guī)範(fàn)化樣式；最少的顏色、邊框或字體相關(guān)的聲明
• typography.css：字體、字重、行高、大小以及標(biāo)題和正文文本的樣式
• layouts.css：管理頁(yè)面佈局和段落的樣式，包括網(wǎng)格
• forms.css：表單控件和標(biāo)籤的樣式
• lists.css：列表特定的樣式
• tables.css：表格特定的樣式
• carousel.css：輪播組件所需的樣式
• accordion.css：手風(fēng)琴組件的樣式

如果您使用預(yù)處理器，例如 Sass 或 Less，您可能還需要包含一個(gè) _config.scss 或 _config.less 文件，其中包含顏色變量等。

在此結(jié)構(gòu)中，每個(gè) CSS 文件都有一個(gè)特定且範(fàn)圍狹窄的作用域。最終使用的文件數(shù)量取決於網(wǎng)站設(shè)計(jì)需要多少視覺(jué)模式或組件。

Foundation 和 Bootstrap 等 CSS 框架使用這種方法。兩者都非常細(xì)緻，為進(jìn)度條、範(fàn)圍輸入、關(guān)閉按鈕和工具提示等使用單獨(dú)的文件。這允許開(kāi)發(fā)者僅包含項(xiàng)目所需的組件。

注意：模式庫(kù)

與這樣將 CSS 分割到多個(gè)文件中密切相關(guān)的概念是模式庫(kù)。 Anna Debenham 的“模式庫(kù)入門(mén)”是對(duì)該主題的很好的入門(mén)介紹。

文件數(shù)量

即使我們?cè)陂_(kāi)發(fā)中使用多個(gè) CSS 文件，我們也不會(huì)以這種形式將所有文件都提供給瀏覽器。所需的 HTTP 請(qǐng)求數(shù)量會(huì)使我們的網(wǎng)站加載速度變慢。相反，我們將把較小的 CSS 文件 連接 成幾個(gè)較大的文件以用於生產(chǎn)環(huán)境。

在此上下文中，連接意味著將多個(gè)文件組合成單個(gè) CSS 負(fù)載。它消除了對(duì) @import 語(yǔ)句或多個(gè) link 元素的需求。當(dāng)前的瀏覽器對(duì)一次可以下載的文件數(shù)量有限制。我們可以使用連接來(lái)減少網(wǎng)絡(luò)請(qǐng)求的數(shù)量，從而更快地將內(nèi)容提供給用戶。

通常，您的 Web 開(kāi)發(fā)框架會(huì)將其作為其資產(chǎn)管理功能（例如 Ruby on Rails）的一部分來(lái)處理連接。一些內(nèi)容管理系統(tǒng)也這樣做，無(wú)論是作為核心功能還是附加組件。在第 9 章中介紹的預(yù)處理器也使連接變得容易。如果預(yù)處理器和開(kāi)發(fā)框架都不是您工作流程的一部分，那麼您的操作系統(tǒng)很可能有一個(gè)您可以使用的連接實(shí)用程序。

對(duì)於 Mac OS X 或 Linux，請(qǐng)使用 cat 實(shí)用程序連接文件：

cat file1.css file2.css > combined-output-file.css

使用 Windows？嘗試使用 type 實(shí)用程序：

type file1.css file2.css > combined-output-file.css

您還可以使用 Bash、PHP、Python 或您選擇的其他腳本語(yǔ)言編寫(xiě)自己的連接腳本。

注意：CSS 優(yōu)化

連接是 CSS 優(yōu)化的一個(gè)方面。同樣重要的是最小化您的文件以刪除多餘的字符和空格。第 3 章介紹了最小化工具。

那麼您應(yīng)該使用多少個(gè)文件呢？這就是棘手的地方。目前的最佳實(shí)踐是識(shí)別您的關(guān)鍵路徑 CSS——頁(yè)面渲染所需的最小 CSS 量——並使用 style 元素將其嵌入到您的頁(yè)面中。其他 CSS 文件應(yīng)使用 JavaScript 加載。 Addy Osmani 的演示文稿“CSS 性能工具”提供了對(duì)這種技術(shù)的出色概述以及您可以用來(lái)實(shí)現(xiàn)它的某些工具。另請(qǐng)參閱 Filament Group 的 loadCSS。

如果您的內(nèi)容將使用 SPDY 或 HTTP/2 協(xié)議提供服務(wù)，則連接可能是不必要的。使用 HTTP/1.1，瀏覽器按順序下載資產(chǎn)；下一個(gè)請(qǐng)求在上一個(gè)請(qǐng)求結(jié)束時(shí)開(kāi)始。在這種模型下，減少網(wǎng)絡(luò)請(qǐng)求的數(shù)量可以提高網(wǎng)站性能；但是，SPDY 和 HTTP/2 可以同時(shí)下載多個(gè)資產(chǎn)。因此，減少請(qǐng)求數(shù)量並沒(méi)有實(shí)際好處。但是，發(fā)送比渲染頁(yè)面所需更多的字節(jié)是有成本的。 William Chan 的“HTTP/2 注意事項(xiàng)和權(quán)衡”更詳細(xì)地解釋了這一點(diǎn)。最佳方法是確定您的服務(wù)器是否正在提供 HTTP/2 服務(wù)，如果是，則檢查是否更多用戶會(huì)受益於實(shí)際拆分您的資產(chǎn)並僅加載頁(yè)面所需的資產(chǎn)，或者繼續(xù)使用舊方法。如果您有興趣了解有關(guān)性能優(yōu)化方法的更多信息，SitePoint 的書(shū)籍《精益網(wǎng)站》是一個(gè)有用的資源。

關(guān)於 CSS 文件組織的常見(jiàn)問(wèn)題

如何最好地組織我的 CSS 文件？

組織 CSS 文件的最佳方法很大程度上取決於項(xiàng)目的規(guī)模和復(fù)雜性。對(duì)於較小的項(xiàng)目，單個(gè) CSS 文件可能就足夠了。但是，對(duì)於較大的項(xiàng)目，建議將 CSS 分割成多個(gè)文件。這可以根據(jù)它們?cè)O(shè)置樣式的組件或頁(yè)面來(lái)完成。例如，您可以為頁(yè)眉、頁(yè)腳和主要內(nèi)容分別創(chuàng)建一個(gè) CSS 文件。這使得您的代碼更易於維護(hù)和調(diào)試。

如何保持我的 CSS 代碼簡(jiǎn)潔有序？

保持 CSS 代碼簡(jiǎn)潔有序?qū)犊删S護(hù)性至關(guān)重要。您可以通過(guò)遵循一些最佳實(shí)踐來(lái)實(shí)現(xiàn)這一點(diǎn)。首先，使用註釋來(lái)描述 CSS 的每個(gè)部分的作用。其次，將相關(guān)的樣式組合在一起。第三，對(duì)您的類和 ID 使用一致的命名約定。最後，考慮使用 Sass 或 Less 等 CSS 預(yù)處理器來(lái)幫助管理您的樣式表。

什麼是 CSS 預(yù)處理器，它們?nèi)绾螏椭M織 CSS 文件？

像 Sass 和 Less 這樣的 CSS 預(yù)處理器是擴(kuò)展 CSS 功能的腳本語(yǔ)言。它們?cè)试S您使用變量、嵌套規(guī)則、mixin 和函數(shù)，這可以大大簡(jiǎn)化您的 CSS 並使其更易於維護(hù)。預(yù)處理器將您的代碼編譯成瀏覽器可以理解的標(biāo)準(zhǔn) CSS。

如何使用 CSS 模塊來(lái)組織我的 CSS？

CSS 模塊是一種使您的 CSS 更模塊化和可重用的方法。使用 CSS 模塊，您的應(yīng)用程序中的每個(gè)組件都有自己的 CSS 文件。這使得管理您的樣式更容易，因?yàn)楦囊粋€(gè)組件的 CSS 不會(huì)影響其他組件。要使用 CSS 模塊，您需要一個(gè)像 Webpack 或 Parcel 這樣的構(gòu)建工具。

註釋在 CSS 文件組織中的作用是什麼？

註釋在 CSS 文件組織中起著至關(guān)重要的作用。它們可以幫助您和其他開(kāi)發(fā)人員理解 CSS 的每個(gè)部分的作用。這在大型項(xiàng)目中尤其重要，因?yàn)槟赡苡卸鄠€(gè) CSS 文件。註釋還可以用於在調(diào)試期間臨時(shí)禁用 CSS 的某些部分。

如何使用 CSS 框架來(lái)組織我的 CSS？

像 Bootstrap 和 Foundation 這樣的 CSS 框架提供了您可以用來(lái)設(shè)置網(wǎng)站樣式的預(yù)寫(xiě) CSS。它們還為您的 CSS 提供了統(tǒng)一的結(jié)構(gòu)，使其更易於維護(hù)。但是，請(qǐng)記住，如果您沒(méi)有使用大多數(shù)功能，使用 CSS 框架可能會(huì)增加網(wǎng)站的不必要膨脹。

CSS 中一致的命名約定有何重要性？

CSS 中一致的命名約定使您的代碼更易於閱讀和理解。它們還使您在需要更新或調(diào)試代碼時(shí)更容易找到特定的樣式。您可以遵循幾種命名約定，例如 BEM（塊、元素、修飾符）、OOCSS（面向?qū)ο蟮?CSS）和 SMACSS（可擴(kuò)展和模塊化的 CSS 架構(gòu)）。

如何使用 CSS 變量來(lái)組織我的 CSS？

CSS 變量（也稱為自定義屬性）允許您存儲(chǔ)特定值以便在整個(gè) CSS 中重複使用。這可以大大簡(jiǎn)化您的 CSS 並使其更易於維護(hù)。例如，您可以將網(wǎng)站的主要顏色存儲(chǔ)為變量，並在需要該顏色時(shí)使用它。

CSS 重置在 CSS 文件組織中的作用是什麼？

CSS 重置是在 CSS 開(kāi)始時(shí)應(yīng)用的一組樣式，用於重置瀏覽器應(yīng)用的默認(rèn)樣式。這確保您的網(wǎng)站在不同的瀏覽器中看起來(lái)一致。 CSS 重置還可以使您的 CSS 更易於管理，因?yàn)槟槐貫槊總€(gè)元素重寫(xiě)瀏覽器樣式。

如何使用 CSS lint 工具來(lái)保持 CSS 的組織性？

像 Stylelint 和 CSSLint 這樣的 CSS lint 工具可以通過(guò)捕獲錯(cuò)誤和強(qiáng)制執(zhí)行一致的編碼樣式來(lái)幫助您保持 CSS 的組織性。它們可以集成到您的開(kāi)發(fā)工作流程中，以便在您編寫(xiě) CSS 時(shí)自動(dòng)檢查您的 CSS。這可以幫助您編寫(xiě)更簡(jiǎn)潔、更易於維護(hù)的 CSS。

以上是CSS體系結(jié)構(gòu)：CSS文件組織 - 站點(diǎn)點(diǎn)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！