CSS體系結構：CSS文件組織 - 站點點

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

CSS 文件組織

良好的 CSS 架構的一部分在於文件組織。對於單人開發者或非常小的項目來說，單體文件就足夠了。對於大型項目——擁有多個佈局和內容類型，或多個品牌共用同一設計框架的網站——使用模塊化方法並將 CSS 分割到多個文件中更明智。

將 CSS 分割到多個文件中，可以更輕鬆地將任務分配給團隊。一個開發者可以負責與排版相關的樣式，而另一個開發者可以專注於開發網格組件。團隊可以合理地分配工作，提高整體生產力。

那麼，將 CSS 分割到多個文件的良好文件結構可能是什麼樣的呢？以下是一個類似於我在近期項目中使用的結構：

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

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

在此結構中，每個 CSS 文件都有一個特定且範圍狹窄的作用域。最終使用的文件數量取決於網站設計需要多少視覺模式或組件。

Foundation 和 Bootstrap 等 CSS 框架使用這種方法。兩者都非常細緻，為進度條、範圍輸入、關閉按鈕和工具提示等使用單獨的文件。這允許開發者僅包含項目所需的組件。

注意：模式庫

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

文件數量

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

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

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

對於 Mac OS X 或 Linux，請使用 cat 實用程序連接文件：

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

使用 Windows？嘗試使用 type 實用程序：

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

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

注意：CSS 優化

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

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

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

關於 CSS 文件組織的常見問題

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

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

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

保持 CSS 代碼簡潔有序對於可維護性至關重要。您可以通過遵循一些最佳實踐來實現這一點。首先，使用註釋來描述 CSS 的每個部分的作用。其次，將相關的樣式組合在一起。第三，對您的類和 ID 使用一致的命名約定。最後，考慮使用 Sass 或 Less 等 CSS 預處理器來幫助管理您的樣式表。

什麼是 CSS 預處理器，它們如何幫助組織 CSS 文件？

像 Sass 和 Less 這樣的 CSS 預處理器是擴展 CSS 功能的腳本語言。它們允許您使用變量、嵌套規則、mixin 和函數，這可以大大簡化您的 CSS 並使其更易於維護。預處理器將您的代碼編譯成瀏覽器可以理解的標準 CSS。

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

CSS 模塊是一種使您的 CSS 更模塊化和可重用的方法。使用 CSS 模塊，您的應用程序中的每個組件都有自己的 CSS 文件。這使得管理您的樣式更容易，因為更改一個組件的 CSS 不會影響其他組件。要使用 CSS 模塊，您需要一個像 Webpack 或 Parcel 這樣的構建工具。

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

註釋在 CSS 文件組織中起著至關重要的作用。它們可以幫助您和其他開發人員理解 CSS 的每個部分的作用。這在大型項目中尤其重要，因為您可能有多個 CSS 文件。註釋還可以用於在調試期間臨時禁用 CSS 的某些部分。

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

像 Bootstrap 和 Foundation 這樣的 CSS 框架提供了您可以用來設置網站樣式的預寫 CSS。它們還為您的 CSS 提供了統一的結構，使其更易於維護。但是，請記住，如果您沒有使用大多數功能，使用 CSS 框架可能會增加網站的不必要膨脹。

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

CSS 中一致的命名約定使您的代碼更易於閱讀和理解。它們還使您在需要更新或調試代碼時更容易找到特定的樣式。您可以遵循幾種命名約定，例如 BEM（塊、元素、修飾符）、OOCSS（面向對象的 CSS）和 SMACSS（可擴展和模塊化的 CSS 架構）。

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

CSS 變量（也稱為自定義屬性）允許您存儲特定值以便在整個 CSS 中重複使用。這可以大大簡化您的 CSS 並使其更易於維護。例如，您可以將網站的主要顏色存儲為變量，並在需要該顏色時使用它。

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

CSS 重置是在 CSS 開始時應用的一組樣式，用於重置瀏覽器應用的默認樣式。這確保您的網站在不同的瀏覽器中看起來一致。 CSS 重置還可以使您的 CSS 更易於管理，因為您不必為每個元素重寫瀏覽器樣式。

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

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

以上是CSS體系結構：CSS文件組織 - 站點點的詳細內容。更多資訊請關注PHP中文網其他相關文章！