Discuzx系统 CSS 编码规范、CSS属性书写顺序

DiscuzX 系统属于一款比较流行的论坛程序，前端部分的实现离不开 CSS。DiscuzX 官方提供了一份 CSS 编码规范与 CSS 属性书写顺序规范，下面是详细讲解。

CSS 编码规范

CSS 编码规范包括了一系列的书写约定，主要包括以下几个方面：

缩进规范

缩进是一种让代码更加易读的方式。DiscuzX 源码的缩进规范如下：

.selector {
    property: value;
    property: value;
}

在 { 前空一格，在 } 后空一行， {} 之间每个属性前缩进一次，之后再空一格。

注释规范

注释是对代码的解释和说明，是优秀代码的一部分。DiscuzX 的 CSS 注释规范如下：

• 块注释

块注释用于对大段或多个选择器的代码进行解释和说明，示例：

/**
 * Description
 * ----------
 * Here is a multiple selector
 * another selector
 * -------
 */

.sld, 
.slz {
    property: value;
}

注释以 /** 开始，以 */ 结束，每行注释开头有一个空格。

• 行注释

行注释可用于对单个属性或行代码进行解释和说明，示例：

.selector {
    /* Here is comments */
    property: value; /* This is a single line comment */
}

行注释以 // 开始，之后需要有一个空格。

选择器规范

选择器的书写规范直接影响 CSS 文件的大小。DiscuzX 的选择器规范如下：

• 连字符命名法

选择器命名以小写字母为主，并用连字符连接，如 .selector-name。

• 命名规范

选择器命名采用语义化命名，根据该类选择器的用途来命名，如 .head-title。

单位规范

CSS 有多种单位，DiscuzX 推荐使用 px 作为内容尺寸单位，而将 em 用于“软件内部”（比如后台、输入框）已经适配好的部分。

媒体查询

DiscuzX 的 CSS 媒体查询如下：

@media only screen and (max-width: 767px) {
    /* Small device styles */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Medium device styles */
}
@media only screen and (min-width: 992px) {
    /* Large device styles */
}

CSS 属性书写顺序

CSS 属性的书写顺序在一定程度上影响了代码阅读效率，DiscuzX 官方提供的 CSS 属性书写顺序如下：

1. Positioning
2. Display & Box Model
3. Typography
4. Visual
5. Other

示例一

.selector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: #333;
    text-decoration: none;
}

示例二

.selector {
    display: inline-block;
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    color: #333;
    text-decoration: none;
    white-space: normal;
}

希望以上规范能够对你的开发实践有所帮助。