@kungfuboy 2016-11-16T10:49:52.000000Z 字数 1300 阅读 1026

小源科技前端规范

小源

新技术栈

NodeJS + Gulp + Sass + Autoprefixer + Browser-sync

以Node为基础环境，使用Gulp管道式工具，配合Sass、Autoprefixer、Browser-sync等插件，实现自动化处理。

安装配置教程

UI校对规范

由于绘制效果图时，设计师的布局方式和前端实现的布局方式有差异，因此有必要约定一份校对规范，规范如下：

前端-UI校对规范

关于命名

尽量不通过id选择器给元素添加样式，推荐语义化的class名，将id的书写权利留给JS用以数据绑定。

注意：需要做动态循环的元素不可以加id。

可移植性较强的class名，单词间采用“-”连接。如：

.layout-column {
    //上下左右居中
    display: flex;
    align-items: center;
    justify-centern: center;
}

订制性的class，复制粘贴率较高，为了方便鼠标的双击复制，单词间采用“_”连接。如：

.li_style {
   //定制了颜色和高度以及字体大小。
   color：#4269e1;
   height: 30px;
   font-size: 14px;
}

订制性强的代码，请尽量用简写。

元素的id名尽量与API返回数据的键名一致，写在js中更方便核对，如：

var data = {
    "pr_path":"192.168.1.1"
}
......
$('pr_path').html(data.pr_path);

Sass使用规范

一个.html文件只允许导入一个css，也就是所有的scss代码在编译前，都要打包在一个.scss文件里。规范如下：

//style.scss       文件名，一般跟引用的.html页面名类似或一样
//导入的.scss模块文件命名前缀必须使用下划线，以区别这是可重用的模块文件，使用后尽量少更改。
//重置样式，许多HTML标签默认自带了样式，如<h1>会带有margin-bottom属性。
@import "_reset.scss";  
//布局样式，主要定义左、中、右布局，上、中、下布局，以及列表布局等常见但是不易写的布局样式。
@import "_layout.scss";
//边框样式，主要在移动端口实现真正的1像素，边框和线。PC端可以不引入此文件。
@import "_border.scss";
/*以上文件中不允许出现任何定义字体大小、行高、背景色等耦合性高的属性*/
//有必要的情况下可以导入颜色模块，但要保证该模块不会被其他项目引用。
//包含了以上文件后，现在开始可以书写订制样式了，主要书写字体、行高、颜色等，但尽可能少覆盖或不覆盖上面几个文件的样式。

方便查找和更改，颜色色值使用变量赋予。变量名尽量语义化，如：

$_f_color: #000000      //字体颜色
$_bg_color: #f7f7f7     //背景颜色

关于放置位置

无论是<link>引入的样式，还是<script>引入的脚本，放置约定为：PC端放在</body>前面，移动端放在<head>标签内。

移动优先原则

业界已经将移动优先原则作为最佳实践，因此要制作响应式页面时，最好优先开发移动端，可以尽可能地减少样式重载和覆盖。