1. 规范说明
此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。
此规范为参考规范，不全是硬性要求，部分硬性约定见下一条书写规范，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。
1.1 结构说明
-- 项目结构
----|---- CSS文件结构
----|---- JS文件结构
2. 书写规范
2.1 样式与内容分离
2.1.1 项目结构
---
|---- index.html 入口页
|---- js/ JS //具体见JS细化结构
|---- css/ CSS //具体见CSS细化结构
2.1.2 重构步骤约定
-
index.html全部样式附着于class="xxx"注： 此时文件中不包含任何一个 id="xxx" - 为上一步书写 CSS style
[至此重构完成] - 开始书写
js交互文件，使用ID和Class定位被操作句柄 - 向
index.html中需要的地方添加id="xxx"及data-xxx="xxx"
[至此交互效果完成]
2.1.3 命名规范
- 文件及文件夹: 全部英文小写字母+数字或连接符"
-,_"，不可出现其他字符
如：../css/style.css, jquery.1.x.x.js - 文件：调用
/libs文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含
如：/libs/jquery.1.9.1.js/libs/modernizr-1.7.min.jsfileuploader.jsplugins.js - ID: 匈牙利命名法 & 小駝峰式命名法
如：firstNametopBoxListfooterCopyright - Class: [减号连接符]
如：top-itemmain-boxbox-list-item-1 - 尽量使用语义明确的单词命名，避免
leftbottom等方位性的词语
2.1.4 格式&编码
- 文本文件：
.xxxUTF-8_(无BOM)_ 编码 - 图片文件：
.png(PNG-24).jpg(压缩率8-12) - 动态图片：
.gif - 压缩文件：
.tar.gz.zip
2.2 CSS 细化规范
2.2.1 CSS 文件结构
--- ../css/
|---- css/libs/reset.css CSS reset文件
|---- … …
|---- css/images/ 主 CSS-sprite 图片
|---- css/style.css 主 CSS 样式表
|---- … …
|---- css/images/xxx/sprite.png xxx 的 CSS-sprite 图片
|---- css/xxx-style.css xxx 的 样式表
2.2.2 CSS(含Less) 文件结构
--- ../css/
|---- css/libs/reset.less CSS reset文件
|---- css/libs/elements.less Less 函数复用文件
|---- … …
|---- css/images/ 主 CSS-sprite 图片
|---- css/style.less 主样式Less
|---- css/style.css less -> css 自动生成
|---- … …
|---- css/images/xxx/sprite.png xxx 的 CSS-sprite 图片
|---- css/xxx-style.less xxx 的 Less
|---- css/xxx-style.css less -> css 自动生成
2.2.3 使用Less
在 .less文件头部引入 reset.less & elements.less，之后调用如下属性传参即可，具体使用说明见 -> Lesselements 官方文档
@import "libs/reset.less";
@import "libs/elements.less";
.gradient
.bw-gradient
.bordered
.drop-shadow
.rounded
.border-radius
.opacity
.transition-duration
.rotation
.scale
.transition
.inner-shadow
.box-shadow
.columns
.translate
2.2.4 CSS reset
CSS reset 文件使用：reset.css 或 reset.less
- reset文件用于重设各个浏览器的默认样式方案，解决其引起的耦合问题。
- 也可使用
.clearfix清除浮动
2.2.5 CSS 注释格式约定
/*
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@require: reset.css
@author: Andy Huang([email protected])
*/
其中，@require为可选项
- CSS换行制表：使用 2
或4个空格，而非[Tab] - 书写格式：
- CSS名称+冒号+属性
如：.box1 {float:left;} - 建议保留
{左侧空格，字体名用\包含
如：.box1,.box2,.box3 {font-family:Courier,'Courier New';} - 避免中文，或使用转义，推荐前者
如：font-family: "Microsoft YaHei";font-family:\5fae\8f6f\96c5\9ed1;
- CSS名称+冒号+属性
2.2.6 CSS各属性的排列顺序：不做硬性要求
如：以下2种顺序均可
.box {
/* 顺序1 */
background: none repeat scroll 0 0 transparent;
bottom: 11px;
position: relative;
width: 22px;
z-index: 33;
}
.box {
/* 顺序2 */
z-index: 33;
width: 22px;
bottom: 11px;
background: transparent none repeat scroll 0 0 ;
position: relative;
}
2.2.7 CSS嵌套规则
/* 推荐嵌套层级 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}
/* 不推荐 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}
2.2.8 CSS格式化
勿格式化，保留下面这种格式，增加可读性和可维护性，后期后台程序(如：PHP/Python)会将CSS压缩成 一行 输出：
.box{
/* 勿格式化，增加可读性 */
background: none repeat scroll 0 0 transparent;
bottom: 11px;
position: relative;
width: 22px;
z-index: 33;
}
2.3 XHTML 细化规范
2.3.1 HTML 注释格式约定
HTML行内注释格式
- HTML换行缩进：采用 2 空格
2.3.2 HTML嵌套规则
/* 推荐嵌套层级 */
- some text
- some text
- some text
-
2.3.4 * 第一行统一使用HTML5标准：
极客公园 | 创新者社区
2.3.5 Meta 的使用：（需要根据具体需求按需选择）可参看：cool-head
-
-
标签缺省格式：xxx注：target="_blank"根据需求决定 -
标签预留链接占位符使用###，参见：[a标签占位符问题] - 所有标签需要符合XHTML标准闭合
- 一律统一标签结尾斜杠的书写形式：
- 避免使用已过时标签，如：
而用等代替 - 使用
data-xxx来添加自定义数据，如： - 避免使用
style="xxx:xxx;"的内联样式表 - 特殊符号使用参考HTML 符号实体
2.4 JS 细化规范
2.4.1 JS 文件结构
---/js/
|---- /libs/plugin-1/ 使用到的js插件1
|---- /libs/plugin-2/ 使用到的js插件2
|---- /libs/plugin-3/ 使用到的js插件3
|---- script.js 单独书写的js
|---- plugins.js 调用的plugins汇总
|---- juqery-1.9.x.min.js 调用jq库文件
- JS 换行缩进：采用 4 空格
- 结束行需添加分号
; - jQuery变量要求首字符为
$, 私有变量:首字符为_; 尽量避免全局变量. - 避免使用 eval()，setTimeOut使用调用函数，考虑重绘，回流 操作对页面影响 参看：reflows，repaints
- JS调试使用
console.log()及console.dir()进行，避免使用弹出框，线上版需要注释所有调试代码 - JS压缩混淆工具: JS Compressor 如果使用了压缩，需要留
name-src.js在同路径供今后修改使用
2.4.2 jQuery Call
2.4.3 jQuery Plugin
- IE对HTML5标签支持，以及浏览器特性检测：Modernizr & html5shiv
IE6 PNG 图片支持：DD_belatedPNG- 定制&统一 浏览器的滚动条样式：jquery-scroll & Lionbars
- hover提示效果文字：bootstrap-tooltips & tipsy
- 滚动条跟随nav效果：bootstrap-scrollspy
- 提示冒泡文字：grumble.js
- 导航栏过渡效果：lavalamp
- 移动设备的滚动效果：iscroll 4
- Mac OS Lion 风格的滚动条：Lionbars
- 弹性SlideShow：kwicks for jQuery
- 瀑布流：isotope
- 抖动效果：jQ shake
- LightBox：fancyBox
- KenDo UI：KenDo UI
- textarea自适应高度：elastic
- 提示区域 & 提示层：noty
- 浮动话题泡：jQuery grumble
- 旋转进度：jQuery Knob
2.4.4 JSON格式规范
参考JSON Style Guide翻译，原版：Google JSON Style Guide
HTML 细化规范
- HTML
head部分的结构参看：cool-head (摘取必要内容即可) -
css文件置于都 头部 -
jQuery及Google Analytics引用置于 头部 - 其他效果
js及统计代码文件置于 尾部 - HTML 代码尽量过一遍HTML5 验证
- HTML 占位图片使用 temp.im & placehold.us 图片服务
2.5 Responsive Web 规范
从设计之处就坚持"Mobile First"的理念，在重构页面的时候要灵活采取响应式的解决方案。
2.5.1 响应式实现途径
* 设置 meta viewport 属性
* 引入不同尺寸设备的样式表
* 使用 CSS Media Queries 方法
@media screen and (max-width: 40.5em) {
.product-img {
width: auto;
float: none;
}
}
@media screen and (max-width: 480px) {
}
* JS控制导航栏在 resize 事件 触发后的可见性，如：
$(w).resize(function(){ //Update dimensions on resize
sw = document.documentElement.clientWidth;
sh = document.documentElement.clientHeight;
checkMobile();
});
//Check if Mobile
function checkMobile() {
mobile = (sw > breakpoint) ? false : true;
if (!mobile) { //If Not Mobile
$('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
} else { //Hide
if(!$('#nav-anchors a').hasClass('active')) {
$('#nav,#search').hide(); //Hide full navigation and search
}
}
}
2.5.2 响应式解决方案
* 弹性图片
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
* 自适应嵌入媒体
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
* 禁用iPhone字体自适应功能：
html {
-webkit-text-size-adjust: none;
}
* 让 IE 9 以下的IE版本支持响应式：
2.6 Newletter 制作规范
-
CSS只可使用 内联样式表 ，如：style="margin:0;" - 设计之初遵循： 图上无文本，文本后无底纹 的规则
- 使用
MailChimp HTML Email CSS Fix参看下文链接 - 引入
CSS Reset for HTML Email参看下文链接 - 使用
Table布局而非DIV - 所有图片使用
IMG标签，如： - 可以适当使用占位符
spacer.gif - 多用
- 整体最佳宽度为：
550-600px - 不使用
Javascript - 正式发送给用户之前，多次测试
更多细节参考下面链接：
12 Killer Tips and Tricks for Building HTML Email
2.7 生产力工具推荐
2.7.1 for Mac OS
for more app detial check -> IUSETHIS
2.7.1.1 前端相关工具(Mac)
- 编辑器：Sublime Text 2 / TextMate 2 / Vim / Intellij IDEA
- 命令行：iTerm2
- 浏览器调试环境：Chrome / Firefox + Firebug
- 移动设备调试环境：Mozilla Fennec
- 兼容性测试：VirtualBox + Win XP（IE 8）
- 版本控制工具：GitHub for Mac / Versions / SourceTree
- FTP工具：Filezilla / ForkLift
- HTTP抓包及Post/Get模拟：Charles
- PHP集成环境：XAMPP for Mac / MAMP
- SQL数据库管理：Sequel Pro
- 标注工具：Mark Man / xScope
- 取色拾色器： Frank DeLoupe / Sip / Snip / xScope
- MarkDown编辑器：Mou
- 浏览器免刷新开发环境：LiveReLoad / CodeKit
- CSS Sprite切图工具：SpriteRight
- Less -> CSS 编译：CodeKit / LiveReLoad / Less
- 配色方案工具：ColorSchemer Studio
- 多浏览器Cookie管理：Cookie
- 图片素材收集：Sparkbox / Pixa
2.7.1.2 其他效率工具
- 快速启动及切换app：Alfred
- 剪切板历史记录：Alfred(Fretures -> Clipboard)
- 笔记：Evernote
- 轻量级GTD：Clear
- 压缩解压：The Unarchiver / Keka / iPack
- 语言文档和快捷词扩展：Dash
- 时间中断提醒：BreakTime
2.7.2.1 前端相关工具(Windows)
- 编辑器：Sublime Text 2 / Vim / Intellij IDEA
- 命令行：Putty
- 浏览器调试环境：Chrome / Firefox
- 移动设备调试环境：Chrome Remote USB Debugging
- 版本控制：Subversion / Github for Windows
- FTP工具：Filezilla
- 抓包工具：Fiddler2
- MarkDown：MarkdownPad
- 浏览器免刷新开发环境：LiveReLoad / F5
- Less -> CSS编译：less.org(nodejs环境下编译)
- Haml -> Html编译：haml.info(Gem下编译)
- 响应式设计查看工具：Firefox Responsive Design View
2.7.2.2 其他效率工具(Windows)
- 笔记：Evernote
- 压缩解压：7z
2.7.3 其他收集
- Firefox 扩展收藏集 -> Firefox Add-ons collections
- Chrome 扩展 -> 待添加
- Sublime Text 2 技巧 -> ST2 资源技巧汇总
2.8 相关技巧
Wiki page index
- 各浏览器的缓存清除方法
- 测试技巧Gmail 添加词缀 .+ 获得多个邮件的方法
- 关于Mac Win Linux跨系统传文件，文件名乱码的解决方案
- 技术团队"路由代理"解决方案和使用须知
2.9 参考数据
涉及到 设计->重构->兼容性->测试 时可参考各浏览器的占用情况
-- updated: 2013/02 - 2013/04 via Google Analytics of GeekPark
| 总浏览器分布 | IE版本分布 | 移动设备分布 | 屏幕解决方案 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
|
使用团队
此规范基于 MIT License 开源，持续更新维护中，可 Star 或 Fork 本项来形成你的规范，请以 创建[issues] 的方式反馈，或发起Pull Request
[src="" 问题]: http://js8.in/555.html "src="" 问题"
[a标签占位符问题]: http://www.v2ex.com/t/48511/ "a标签占位符问题"