Discuz-x系列教程 DX的css命名规则、缓存、加载机制

Discuz-x系列教程 DX的CSS命名规则

Discuz-x (简称DX)是一款流行的论坛系统，它的前端开发使用了LESS和CSS预处理语言，同时有一套自己的CSS命名规则。

DX的CSS命名规则

DX的CSS命名规则主要包括以下几个方面：

1. 命名空间：通过给不同部分的CSS添加命名空间来避免CSS的冲突。命名空间可以是类名、ID或其他选择器。例如：

```
.header-menu {
background-color: #fff;
}

.sidebar-menu {
background-color: #f1f1f1;
}
```

这里.header-menu和.sidebar-menu就是命名空间。

1. BEM规范：采用BEM (Block Element Modifier) 命名规范来组织页面元素、样式和JS交互，使之更易于理解和维护。例如：

.button {}
.button--primary {}
.button__icon {}
.button__text {}

这里.button是块级元素，.button--primary表示.button的一种状态，.button__icon和.button__text是.button的组成部分。

1. 重置样式：在不同的浏览器和设备下，有些元素的默认样式是不同的，为了避免这种不一致性，DX会对一些元素进行重置样式。例如：

```
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
```

DX的缓存和加载机制

DX使用了一些缓存和加载机制来提高访问速度和用户体验，其中包括：

1. 模板缓存：已经编译好的模板会被缓存，下次访问直接调用缓存的模板文件，加快页面的展示速度。

2. CSS合并与压缩：将多个CSS文件合并成一个文件，减少了浏览器对于CSS的请求次数，同时还对CSS进行了压缩，减小了CSS文件的体积，提高了加载速度。

3. JS异步加载：DX使用require.js库来异步加载Javascript文件，这样页面的渲染就不受JS文件的加载速度影响。

示例说明

示例1：使用BEM规范

通过使用BEM规范，我们可以将页面元素、样式和JS交互组织起来。例如下面这个按钮组件：

<div class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Submit</span>
</div>

在使用BEM规范的情况下，可以将这些元素的CSS样式分别定义为：

.button {}
.button--primary {}
.button__icon {}
.button__text {}

这样，在页面增加新的按钮组件时，只需要按照上述规则进行命名，就能避免样式冲突的问题。同时，在修改样式时也能更容易地定位到相关的代码。

示例2：CSS文件合并与压缩

我们假设有两个CSS文件：style1.css和style2.css，下面是它们的代码：

/* style1.css */
body {
  background-color: #fff;
}

/* style2.css */
.header {
  height: 60px;
}

如果我们在HTML页面中引入这两个文件，代码如下：

<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">

那么页面就会向服务器发送两个请求，分别获取style1.css和style2.css，这样就会影响页面的加载速度。

为了避免这个问题，我们可以将这两个文件合并并压缩成一个文件，代码如下：

/* merge.css */
body{background-color:#fff}.header{height:60px}

在HTML页面中引入这个文件，代码如下：

<link rel="stylesheet" type="text/css" href="merge.css">

这样一来，页面只需要向服务器发送一次请求，就能获取到所有的CSS文件，提高了页面加载速度。