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

CSS 文件組織

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

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

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

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

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

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

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

注意：模式庫

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

文件數(shù)量

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

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

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

對于 Mac OS X 或 Linux，請使用 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 或您選擇的其他腳本語言編寫自己的連接腳本。

注意：CSS 優(yōu)化

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

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

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

關(guān)于 CSS 文件組織的常見問題

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

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

如何保持我的 CSS 代碼簡潔有序？

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

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

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

如何使用 CSS 模塊來組織我的 CSS？

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

注釋在 CSS 文件組織中的作用是什么？

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

如何使用 CSS 框架來組織我的 CSS？

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

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

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

如何使用 CSS 變量來組織我的 CSS？

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

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

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

如何使用 CSS lint 工具來保持 CSS 的組織性？

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

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