XCUI - CSS STYLE GUIDE

[yueyao]

CSS

• 注释

注释统一用/* */

/* 头部 */
.header {
    
}
/* 
 * 头部
 */
.header{
    
}

• 分号

属性值后面跟;

body {
    color: red;
}

• 引号

最外层统一使用双引号；url的内容要用引号；属性选择器中的属性值需要引号。

body {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {

}

• 命名

类名使用小写字母，以中划线分隔,
id采用驼峰式命名。 *BEM

• 颜色

颜色16进制用小写字母,可简写就简写（如#cccccc => #ccc)。

// bad
body { 
    color: red;
}
// good
body {
    color: #ccc;
}

• 缩进

4空格。

body {
    margin: 0;
    padding: 0;
}

• 选择器

小写，多个选择器换行声明。

// bad
BODY {
    
}
// good
body,
html {
    color: red;
}

• 选择器与{之间有空格。
• 属性名与之后的:无空格，:与属性值之间有空格。
• 多个属性值,分割，且有,后面有空格。

// bad
body{
    color:red;
}
// good
body {
    color: red;
    font-family: Arial, sans-serif;
}

> / + / ~选择符前后有空格

div + p {
    color: red;
}

id class 选择器不添加类型限定(特殊情况除外)

// bad
div#id,
p.line {
    color: red;
}
// good
#id,
.line {
    color: red;
}

选择器嵌套不宜过多，不应大于4层

// bad
.index .header .left .log a {
    color: red;
}
// good
.index .log a {
   color: red; 
}

• 属性书写顺序

属性分类大致为4类：

• Formatting Model（布局方式、位置）
• Box Model（尺寸）
• Typographic（文本相关）
• Visual（视觉效果

建议依次按照顺序填写：Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等

• 其它

• 不允许有空规则
• 不适用*选择器
• 属性尽量不简写，分开声明更清晰(例：font background)