前端规范汇总-SCSS 篇

 

命名规范

 

1.CSS 命名一般采用小写英文字母或组合命名，单词以单词间以"-"分割；英文单词不缩写，除非一看就明白的单词。

 

2.所有组件中的最外层元素都加一个以组件名+wrap命名的样式，如：

 

orderList组件：

 

<template>

 

    <div class="order-list-wrap">

 

    </div>

 

</template>

 

3.class 必须代表相应模块或组件的内容或功能，不得以样式信息进行命名，如：

 

<!-- good -->

 

<div class="sidebar">

 

</div>

 

<!-- bad -->

 

<div class="left">

 

</div>

 

4.css选择器: 尽量用class选择器，少用元素选择器(如：div)

 

页面结构命名

 

wrap：代表整个页面，用于最外层

 

container：一个整体容器，用于最外层

 

head,header 页头区域，用于头部

 

nav：导航条

 

content：内容，用于网站中部主体

 

main：网站中的主要区域，用于中部内容。

 

sidebar：侧栏

 

footer： 页脚

 

导航命名

 

nav：导航条

 

topnav：顶部导航

 

mainnav：主导航

 

title：标题

 

menu：菜单

 

submenu：子菜单

 

drop：下拉

 

dropmenu：下拉菜单

 

links：连接菜单

 

样式顺序规范

 

建议相关的属性说明放在一组，提高代码的可读性。

 

布局方式、位置、相关属性 (position、left、right、top、bottom、z-index)

 

盒子模型，相关属性包括 (display、float、width、height、margin、padding、border、border-radius)

 

文本排版，相关属性包括 (font、color、background、line-height、text-align)

 

视觉外观，相关属性包括 (color、background、list-style、transform、animation)

 

由于定义可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首页。而盒模型决定了组件的尺寸和大小，所以排在第二位。文本和视觉对元素影响较小，所以放在第三，第四位。示例代码如下：

 

.box {

 

    position: absolute;

 

    top: 0;

 

    left: 20%;

 

    z-index: 99;

 

    width: 100px;

 

    height: 100px;

 

    font-size: 20px;

 

    color: red;

 

    background-color: aqua;

 

}

 

小数点和单位

 

值在 -1 和 1 之间去掉小数点的 0，如果属性值为数字 0，不加任何单位。

 

.box {

 

    width: 100px;

 

    height: 100px;

 

    margin: 0 10px 20px 0;

 

    opacity: .5;

 

}

 

引号

 

属性选择器或属性值用双引号 ""括起来，而 URL 值 url() 不要使用任何引号。

 

.box {

 

    font-family: "open sans",arial,sans-serif;

 

    background-image: url(http://www.cn.bing.com/logo.png);

 

}

 

空格

 

在每个声明快选择器与左括号浅添加一个空格；

 

声明快的右花括号应当单独成行；

 

每条声明语句的；后应该插入一个空格，前面无空格；

 

.box {

 

    float: left;

 

    width: 100px;

 

    color: #333;

 

    background-color: #f5f5f5;

 

    text-align: center;

 

}

 

媒体查询

 

将媒体查询放在尽可能相关规则的附近，方便日后查阅。

 

.element { 

 

}

 

.element-avatar {

 

}

 

@media (min-width: 480px) {

 

    .element {

 

    }

 

    .element-avatar {

 

    }

 

}

 

注释

 

在适当的位置给予代码正确的注释，让他人更容易理解。好的代码注释传达上下文和目标

 

/*

 

   名称

 

   各参数表示的含义 

 

*/

 

.modal-header {

 

}

 

全局样式命名规范

 

全局样式采用十六进制进行命名，例如：

 

$color-ffffff: #ffffff;

 

有透明度的情况，一般在其十六进制的后面加多一个字母 a已视区别

 

$color-ffffffa: #ffffff;

 

如有相同十六进制相同，那么在其十六进制后面加多一个其代表的功能