注意事项

• 本版之后改为使用横杠-作为连接符，不再使用下划线_
• 全局通用的也就除了头部、底部、轮播这些，基本上就比较少涉及的了
• js采用的是SUI v1.5.1组件库，除了修改了carousel.js之外，其他均无修改以及补充了几个额外的文件进去，请知晓。

样式命名

Sass

本版采用了Sass作为CSS的模块化解决方案，尽可能的使样式的管理更加方便。

比如对于z-index的层级管理，使其统一集中，不会出现各种本来应该它在上面却被另一个所遮盖的问题。使层级更一目了然。

命名前缀

global or general

指全局通用
比如：.g-header或者.g-footer
表示全局通用的的头部、底部

page

指页面级样式，只作在用于所属页面下的样式
比如：.p-search，搜索类相关页面

widget

指页面内的挂件
比如：.w-flotage，侧栏浮动挂件

常用固定样式

• .container 页面固定布局容器
• .clearfix 清除浮动

建议命名

场景一：

有时候我们需要浮动元素居中，这时候就要套很多层，往往纠结怎么去命名，这时候统一采用.inner作为浮动元素的父级容器，而.inner又被它的父级所包含，这样设置好相关样式即可居中，就不用想那多名字了。

HTML:

<div class="parent">
    <div class="inner">
        <div class="float-elements"></div>
    </div>
</div>

CSS:

.parent { text-align: center; }
.parent .inner { display: inline-block; }
.parent .float-elements { float: left; } 

Gulp构建说明

默认使用gulp开启本地开发任务，主要监听css、img和js等资源文件，默认只会输出到本地目录内，如需同步输出至开发版目录内，执行gulp --dev命令即可。

使用的是browser-sync提供的静态服务器来访问。

注意事项

• Gulp用的是4.0版本，具体请参考Gulp官方Git里的分支文档

• 任务跑久了，编译时间会变长，重启任务即可。

• 默认任务都不会同步输出到开发版的目录，只会输出到本地目录，下列所有任务均默认以gulp xxx开始(xxx为任务名)。

• 如若需在本地修改时，同步输出到开发版的目录内，需加配置参数，如：gulp sass --dev，这样修改本地的时候，不单只会输出到本地目录内，同时也会输出到开发版目录内。

• 本地和开发版构建都不会有压缩，压缩只会在发布至静态资源服务器正式环境时才会有压缩。

• 正式压缩是调用TinyPNG API，每月免费500张，要多的只能手动申请key替换，同时本地目录内会有个名为.tingpng-sigs的记录文件，里面记录的是压缩过的图片指纹（用于比对已压缩文件，压缩时会跳过这些文件），请知晓。

• 注意文件比对时，有时候会发现即使没修改过也会标为修改，看下是否是换行符引起的。

任务列表

Todo

• 发布到静态资源服务器文件夹的任务(操作前两边都要先更新svn或git)
• 图片压缩任务（TinyPNG的服务受网络影响，不稳定，估计还是人肉压缩吧）

普通任务

适用于任务队列或单次运行

• 任务队列默认用browser-sync启用静态服务，同时监听文件变动
• 单次运行没有监听

适用于单个任务监听

开发版JS同步至本地

lib目录内的文件修改不会同步到本地