1. 书写规范

1.1 项目结构

---/html/|---- /index            |---- /index/index.html     首页 |---- /user/          与用户相关的页面 |---- /user/login.html     登录页---/css/|---- /base.css         重置浏览器样式  |---- /page           逻辑页面的css|---- /page/pagename.css    单独书写的css|---- /common.css        css通用样式库---/js/|---- /lib           公用组件|---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page           逻辑页面的js|---- /page/pagename.js     单独书写的js|---- /common.js        公用方法---/img/|---- /page           页面对应的图片|---- /page/wap         手机端图片夹|---- /page/wap/wap_icon.png  手机端图标|---- /logo.png         公用图片

1.2 项目命名规范

项目：用项目对应的英文单词命名

文件及文件夹:

  • 全部英文小写字母 可以使用中线 不可出现其他字符 如login,my-order
  • 调用 `/lib`里面的文件需包含版本号 压缩文件需包含`min`关键词 其他插件则可不包含 如：`/lib/jquery.1.9.1.js`

1.3 格式&编码

  • 文本文件： `.xxx` UTF-8_(无BOM)_ 编码
  • 图片文件： `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_
  • 动态图片： `.gif`
  • 压缩文件： `.tar.gz` `.zip``.rar`

2. CSS 规范

2.1 CSS 命名规范

  • 所有的命名用小写的英文单词
  • 不使用简单的方位词直接命名 如"left" "bottom"
  • 不缩写单词 除非一看就明白的单词
  • 长名称或词组可以使用下划线作为连接符
  • 避免选择器嵌套层级过多 少于3级
  • 不要随意使用id id应该按需使用 而不能滥用
  • 使用CSS缩写属性 比如padding:0 10px 5px 5px等等 这样精简代码同时又能提高用户的阅读体验。

命名参考如下：

CSS样式命名说明网页公共命名
wrapper页面外围控制整体布局宽度
container或content容器,用于最外层
layout布局
head, header页头部分
foot, footer页脚部分
nav主导航
sub_nav二级导航
menu菜单
sub_menu子菜单
side_bar侧栏
sidebar_l, sidebar_r左边栏或右边栏
main页面主体
tag标签
msg message提示信息
tips小技巧
vote投票
friendlink友情链接
title标题
summary摘要
login_bar登录条
search_input搜索输入框
hot热门热点
search搜索
search_output搜索输出和搜索结果相似
search_bar搜索条
search_results搜索结果
copyright版权信息
branding商标
logo网站LOGO标志
site_info网站信息
site_info_legal法律声明
site_info_credits信誉
join_us加入
partner合作伙伴
service服务
regsiter注册
arr arrow箭头
guild指南
site_map网站地图
list列表
home_page首页
sub_page二级页面子页面
tool, toolbar工具条
drop下拉
dorp_menu下拉菜单
status状态
scroll滚动
tab标签页
left right center居左、中、右
news新闻
download下载
banner广告条(顶部广告条)

2.2 CSS 书写规范

向"无ID 无层级 无标签"准则靠拢 可有效提高重用性 减小文件大小 提升渲染效率

2.3 CSS 注释格式

用来区分页面的注释 如

模块的注释,如

2.4 CSS各属性的排列顺序：不做硬性要求

  • Positioning（定位 如position top z-index）
  • Box model（盒模型 如display box-sizing width border）
  • Typographic（排版 如font line-height text-align）
  • Visual（视觉 如background color,opacity）
  • Other（其他 如cursor）

由于定位（positioning）可以从正常的文档流中移除元素 并且还能覆盖盒模型（box model）相关的样式 因此排在首位。盒模型决定了组件的尺寸和位置 因此排在第二位。其他属性只是影响组件的内部（inside）或者是不影响前两组属性 因此排在后面。

2.5 CSS格式化

使用不换行方式书写 增加书写速度

.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}

2.6 CSS字体单位

  • px像素（Pixel） 相对长度单位 像素px是相对于显示器屏幕分辨率而言的。
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置 则相对于浏览器的默认字体尺寸。
  • rem也是相对长度单位 但相对的只是HTML根元素。
  • vw代表视窗(Viewport)的宽度为1% 如果视窗宽度为1000px 那么50vw = 500px
  • vh代表窗口高度的百分 如果视窗高度为800px 那么50vh = 400px
  • 公司项目使用时注意事项：现有项目都是使用px作为单位 现推荐使用rem,vw,vh作为单位

3. JS 规范

3.1 JS命名规范

3.1.1 JS 变量命名

命名方法：小驼峰式命名

命名规范：前缀应当是名词。(函数的名字前缀为动词 以此区分变量和函数)

命名建议：尽量在变量名字中体现所属类型 如:length、count等表示数字类型；而包含name、title表示为字符串类型。

示例

// 好的命名方式var maxCount = 10;var tableTitle = 'LoginTable';// 不好的命名方式var setCount = 10;var getTitle = 'LoginTable';

3.1.2 JS 函数命名

命名方法：小驼峰式命名法

命名规范：前缀应当为动词

命名建议：可使用常见动词约定

动词含义返回值
can判断是否可执行某个动作(权限)函数返回一个布尔值。true：可执行；false：不可执行
has判断是否含有某个值函数返回一个布尔值。true：含有此值；false：不含有此值
is判断是否为某个值函数返回一个布尔值。true：为某个值；false：不为某个值
get获取某个值函数返回一个非布尔值
set设置某个值无返回值、返回是否设置成功或者返回链式对象
load加载某些数据无返回值或者返回是否加载完成的结果

3.1.3 JS 常量命名

命名方法：名称全部大写

命名规范：使用大写字母和下划线来组合命名 下划线用以分割单词

示例

var MAX_COUNT = 10;var URL = 'http:';

3.1.4 JS 文件命名

使用短线（-）或句点（.）作为分隔符号 推荐使用句点 最好使用小写英文字符 不要使用其他符号和扩展字符 如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"

使用 .js 扩展名 这个扩展名的兼容性最好。其实任何扩展名都可以 只要是 text 类型、编码正确即可

用句点分隔表示名称中的从属关系 范围大的在前 如jQuery 的表单插件 Form既可以命名为jquery.form.js

3.2 js 注释格式

使用多行注释,以结尾

3.3 js 注意事项

书写格式

  • JS 换行缩进：采用tab（打散为4个空格）
  • 结束行需添加分号`;`

性能

  • 尽量选用局部变量而不是全局变量
  • 尽量使用链式写法
  • 尽量减少DOM调用
  • 将js脚本放到页面底部
  • 使用jquery的data来存取数据 减少对dom的操作
  • 使用on方法绑定事件 这是jquery的推荐使用
  • 选择器的选择：尽量不用标签选择器 能用ID选择器的就不用class选择器

4. HTML 规范

4.1 标签使用规范

尽量减少标签层级

双标签必须闭合 单标签用斜线闭合

HTML第一行统一使用HTML5标准<!DOCTYPE html>

一律统一标签结尾斜杠的书写形式：`<br />` `<hr />` 注意之间空格

避免使用已过时标签 如：`<font>` `<frame>` `<s>`

`<img>`标签默认缺省格式：`<img src="#" alt="缺省时文字" />`

`<a>`标签缺省格式：`<a href="#" title="链接名称">xxx</>` 注：`target="_blank"` 根据需求决定

style、link、script可省略type属性 因为 text/css 和 text/javascript 分别是他们的默认值

4.2 HTML注释

<!--内容--><div class="content">    <p>content</p></div>

4.3 注意事项

手机端的自适应布局尽量采用弹性布局 而不是百分比

`css`文件都 置于头部

HTML换行缩进：采用 tab空格

其他效果`js`及`统计代码` 文件置于尾部

手机端的页面都按750px来做 显示效果按375px

5. Image 规范

5.1 图片规范

图片大小：切图时使用web格式保存 减小图片大小

图片尺寸：一律采用整数 如20X20 50X50

图片合并：小图片一律要合并 并保存对应的psd文件 以便后期修改

原文链接：https://lingdianit-com.github.io/Front-End-Standards/