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 裏面的合併了