整体规范

水果理论：经典水果&水果拼盘——css的快乐水

sass语法

css 的预处理器中，sass 的语言特性较 less 更加丰富，除了less支持的变量、嵌套、计算、混合外，sass还支持循环、条件等编程特性。

样式统一采用sass语法

初学者推荐先看下SASS用法指南
更详细的语法参考Sass官网

引号

• 最外层统一使用双引号

• url的内容要用引号

• 属性选择器中的属性值需要引号

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

li[data-type="single"] {
    ...
}

颜色

颜色16进制用大写字母；只有当16进制六位数值全部一样时简写

/* not good */
.element {
    color: #abcdef;
    color: #012;
    color: #333333;
}
/* good */
.element {
    color: #ABCDEF;
    color: #001122;
    color: #333;
}

• 主题色类名定义为 .color-theme
• 单个.vue页面个性化色值，前缀统一用 .thecolor-
• 项目风格统一、复用的色值，加入 variable.scss 中统一管理

盒模型

统一用 border-box

/* reset.scss */
* {
    box-sizing: border-box
}

字段为空的时候，为避免盒模型冗余，注意几个情况：

• 界面不要出现 null
• 界面上分隔符'|'不要单独出现
• 该节点的 padding margin 都不要出现，以免影像后面元素的展现

总之就是节点为空的时候，这个节点完全消失，跟它相关的也完全消失！

因此 margin border 属性一般是给后面的元素写 top 和 left ，也有例外的，视情况而定

例：对列表项写border-top而不是border-bottom

<ul class="margin-top20 border1">
    <li v-for="(item, index) in mainList" :key="index" :class="['flex-spacebetween', {'border-top1': index>0}]">
        ......
    </li>
</ul>

规范细则

• 每个属性声明末尾都要加分号

• 尽量少用标签选择器

• 元素宽高尽量不要写死，大小通过内边距撑开

• 首选flex布局，flex 不支持的时候才用 float 布局

• 大段文字，注意 .break-all

• style行内样式，三元表达式写法：

<div :style="[boolean ? 'height: 190px' : 'height: 140px']">

• 移动端单个vue页面，自定义的个性化样式控制在10个以内

• flex布局下的.line-ellipsis不一定生效（宽度为百分比的时候），解决方案：

1）改用.line-limited1
2）改用固定宽度