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 里面的合并了