Discuz-x 系列教程：DX 的 css 命名規則、快取、載入機制

DISCUZ-x 版本中，對 css 的處理較之前的版本更加智慧化了，為了讓更多的同學有個充分的理解，特把 【黎明】 的資料整理一下發給大家。

各位同學如果有疑問可以跟帖，但禁止任何 AD，直接刪除！

首先，每個頁面都會載入以下兩個類似的 css：
data/cache/style_1_common.css
data/cache/style_1_forum_index.css

一、兩個檔名的命名規則

style_1_common.css
|--是整站通用的全域性 css，所以命名為 【style_1_common.css 】
|--前面的代號是當前使用這套風格的 ID，所以 style_1_common.css 也就是第一套風格的共用的 css

style_1_forum_index.css
|--是 【forum 】廣場 BBS 頻道首頁的 css 樣式，那麼 forum 和 index 分別對應這 CURSCRIPT 和 CURMODULE 的常量值，這個在每個頻|--道的入口指令碼裡都有定義，比如 forum 頻道頁面對應的是 forum.php 。

以上介紹的是 css 的快取載入檔案，當然，還有一些在特殊頁面的 css，這裡就不詳細描述了。

這兩個 css 檔案的生成

首先，那兩個 css 是程式生成的 css 快取檔案，所以如果要改 css 的話，不能直接改那兩個檔案，否則一更新快取，之前的改動就無效了。
拿自帶的 default 模板舉例吧，default 模板中，帶有一個 common 的資料夾，這個資料夾存放的是全域性模板檔案，
裡面有 css 檔案：
style_1_common.css  是 【common.css 】生成的快取
style_1_forum_index.css 是 【module.css 】生成的快取

二、 module.css 的快取和載入機制
開啟 module.css, 可以看到有這樣的說明

這就是經常在模板中用到的判斷，程式讀取這個 css 檔案的內容，透過標識進行判斷，最後把符合條件內的所有 css 生成在一個對應的快取檔案中。

再舉個例子：

第二個例子大家應該知道了，就是再增加一個條件，這裡可以不止兩個：
/** forum::index,forum::viewthread,forum::forumdisplay,XXXX **/

ok，根據自己的需要來加就行了，記得符號 【, 】
大家可以參照這個學習一下，包括你想擴充套件他，都可以直接在裡面直接新增就可以。

下面講講快取 css 是如何生成的

common.css 比較簡單，就是直接讀取，然後生成到 data/cache 目錄下。

每個頻道模組獨立的 css，會先將 module.css 在 data/cache 下生成一個對應的風格 id 下的快取的 css，然後當你訪問某個頻道時，會生
成對應頻道下的 css，此時，剛才介紹的那些標識就起作用了。程式會根據/** group::index **/和/** end
**/這種標識，拆分出哪些頻道、哪些模組該需要哪些 css 。

程式部分就不介紹了，程式的程式碼主要在 source/class/class_template.php 檔案處理，有興趣的同學可以深入研究一下。

三、在模板製作中充分的運用好 css 載入機制，提高頁面的載入速度

新建模板後同學們可以在 【模板資料夾 common 】中建立附加樣式表並命名為：
extend_module.css
extend_common.css
這兩個 css 檔案就是重新定義 common.css 與 module.css 裡面的樣式，這兩個附加樣式與上面講的兩個 css 檔案分別合併，最終就生成 css 快取檔案了

extend_module.css 這裡面必須根據上面第二節裡講的，寫好標識！！

如果想重新定義預設模板中的一些 css，那麼直接在這兩個檔案中重寫就行了。

注意：如果你的模板佈局是完全要重寫的，那就命名為：common.css 和 module.css 這樣程式就只處理新模板中的 css，不會與 default 裡面的合併了