前端规范--写更好的代码
本文目录
规范说明
此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。
此规范为参考规范，不全是硬性要求，部分硬性约定见下一条书写规范，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。
结构说明
-- 项目结构
----|---- CSS文件结构
----|---- JS文件结构
书写规范
样式与内容分离
项目结构
--- |---- index.html 入口页 |---- js/ JS //具体见JS细化结构 |---- css/ CSS //具体见CSS细化结构
重构步骤约定
注： 此时文件中不包含任何一个 id="xxx"
为上一步书写 CSS style
[至此重构完成]
开始书写js交互文件，使用ID和Class定位被操作句柄
向index.html中需要的地方添加id="xxx"及data-xxx="xxx"
[至此交互效果完成]
命名规范
文件及文件夹: 全部英文小写字母+数字或连接符"-,_"，不可出现其他字符 如：../css/style.css, jquery.1.x.x.js
文件：调用/libs文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含 如：/libs/jquery.1.9.1.js/libs/modernizr-1.7.min.jsfileuploader.jsplugins.js
Class: [减号连接符]
如：top-itemmain-boxbox-list-item-1尽量使用语义明确的单词命名，避免leftbottom等方位性的词语
格式&编码
文本文件：.xxxUTF-8(无BOM) 编码
图片文件：.png(PNG-24) .jpg(压缩率8-12)
动态图片：.gif
压缩文件：.tar.gz.zip
CSS 细化规范
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 的 样式表
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 自动生成
使用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
CSS reset
CSS reset 文件使用：reset.css 或 reset.less
reset文件用于重设各个浏览器的默认样式方案，解决其引起的耦合问题。
也可使用.clearfix清除浮动
CSS 注释格式约定
/* @name: Drop Down Menu @description: Style of top bar drop down menu. @require: reset.css @author: Andy Huang(andyahung@geekpark.net) */
其中，@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种顺序均可
.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;
}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{}CSS格式化
勿格式化，保留下面这种格式，增加可读性和可维护性，后期后台程序(如：PHP/Python)会将CSS压缩成 一行 输出：
.box{
/* 勿格式化，增加可读性 */
background: none repeat scroll 0 0 transparent;
bottom: 11px;
position: relative;
width: 22px;
z-index: 33;
}XHTML 细化规范
HTML 注释格式约定
<!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Andy Huang(andyahung@geekpark.net) --> <div id="header"> <div class="xxx"> <span>HTML行内注释格式</span> </div> </div><!-- #header end-->
HTML换行缩进：采用 2 空格
HTML嵌套规则
/* 推荐嵌套层级 */ <ul class="ui-nav"> <li class="ui-nav-item"> some text <ul class="ui-nav-item-child"> <li> some text <ul class="ui-list"> <li class="ui-list-item"> some text</li> </ul ... </ul> </li> <li ... </ul>
* 第一行统一使用HTML5标准：
<!DOCTYPE html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8" /> <title>极客公园 | 创新者社区</title> <meta name="keywords" content="xxxx, xxx, xxxxx" /> <meta name="description" content="xxxxxxxxxxxxxxxxxxxx" />
Meta 的使用：（需要根据具体需求按需选择）可参看：cool-head
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Cache-Control" content="max-age=7200" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.geekpark.net/" /> <link rel="shortcut icon" href="favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <script type="text/javascript" src="/js/xxx.js"></script> <link rel="stylesheet" href="/css/xxx.css"> <script type="text/javascript"> //Google 统计代码 的位置在离</head>最近的位置 </script>
<img>标签默认缺省格式：<img src="xxx.png" alt="缺省时文字" />避免出现src="" 问题
<a>标签缺省格式：<a href="###" title="链接名称">xxx</>注：target="_blank"根据需求决定
<a>标签预留链接占位符使用###，参见：a标签占位符问题
所有标签需要符合XHTML标准闭合
一律统一标签结尾斜杠的书写形式：<br /><hr />注意之间空格
避免使用已过时标签，如：<b><u><i>而用<strong><em>等代替
使用data-xxx来添加自定义数据，如：<input data-xxx="yyy"/>
避免使用style="xxx:xxx;"的内联样式表
特殊符号使用参考HTML 符号实体
JS 细化规范
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在同路径供今后修改使用
jQuery Call
<!-- Grab Google CDN jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>jQuery Plugin
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
JSON格式规范
参考JSON Style Guide翻译，原版：Google JSON Style Guide
HTML 细化规范
HTMLhead部分的结构参看：cool-head (摘取必要内容即可)
css文件置于都 头部
jQuery及Google Analytics引用置于 头部
其他效果js及统计代码文件置于 尾部
HTML 代码尽量过一遍HTML5 验证
HTML 占位图片使用 temp.im & placehold.us 图片服务
Responsive Web 规范
从设计之处就坚持"Mobile First"的理念，在重构页面的时候要灵活采取响应式的解决方案。
响应式实现途径
* 设置 meta viewport 属性
<meta name="viewport" content="width=device-width, initial-scale=1" />
* 引入不同尺寸设备的样式表
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" /> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="enhanced.css" /> <![endif]-->
* 使用 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
}
}
}响应式解决方案
* 弹性图片
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版本支持响应式：
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
Newletter 制作规范
CSS只可使用 内联样式表 ，如：style="margin:0;"
设计之初遵循： 图上无文本，文本后无底纹 的规则
使用MailChimp HTML Email CSS Fix参看下文链接
引入CSS Reset for HTML Email参看下文链接
使用Table布局而非DIV
所有图片使用IMG标签，如：<img style="style="display:block" "src="" />
可以适当使用占位符spacer.gif
多用<br />换行而非<p>
整体最佳宽度为：550-600px
不使用Javascript
正式发送给用户之前，多次测试
更多细节参考下面链接：
12 Killer Tips and Tricks for Building HTML Email
Coding HTML Newsletters (EDM)
生产力工具推荐
for Mac OS
for more app detial check -> IUSETHIS
前端相关工具(Mac)
编辑器：Sublime Text 2 / TextMate 2 / Vim / Intellij IDEA
命令行：iTerm2
移动设备调试环境：Mozilla Fennec
兼容性测试：VirtualBox + Win XP（IE 8）
版本控制工具：GitHub for Mac / Versions / SourceTree
HTTP抓包及Post/Get模拟：Charles
PHP集成环境：XAMPP for Mac / MAMP
SQL数据库管理：Sequel Pro
取色拾色器： Frank DeLoupe / Sip / Snip / xScope
MarkDown编辑器：Mou
浏览器免刷新开发环境：LiveReLoad / CodeKit
CSS Sprite切图工具：SpriteRight
Less -> CSS 编译：CodeKit / LiveReLoad / Less
配色方案工具：ColorSchemer Studio
多浏览器Cookie管理：Cookie
其他效率工具
快速启动及切换app：Alfred
剪切板历史记录：Alfred(Fretures -> Clipboard)
笔记：Evernote
轻量级GTD：Clear
压缩解压：The Unarchiver / Keka / iPack
语言文档和快捷词扩展：Dash
时间中断提醒：BreakTime
前端相关工具(Windows)
编辑器：Sublime Text 2 / Vim / Intellij IDEA
命令行：Putty
移动设备调试环境：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
其他效率工具(Windows)
其他收集
Firefox 扩展收藏集 -> Firefox Add-ons collections
Chrome 扩展 -> 待添加
Sublime Text 2 技巧 -> ST2 资源技巧汇总
相关技巧
使用团队
此规范基于 MIT License 开源，持续更新维护中，可Star或Fork本项来形成你的规范，请以 创建[issues] 的方式反馈，或发起Pull Request
bookoobeats http://www.bookoobeats.com/
perialetheia http://www.perialetheia.com/
[url=http://www.hiyawigs.com/]hiyawigs[/url]
hobbyfreaks http://www.hobbyfreaks.com/
otuzbircek http://www.otuzbircek.com/
minnfluencer http://www.minnfluencer.com/
trancelater http://www.trancelater.net/
joalby http://www.joalby.com/
attivopizza http://www.attivopizza.com/
cobimusic http://www.cobimusic.com/