Home

Awesome

GeekPark 前端代码规范 v1.1

GeekPark BusinessValue ITvalue

GeekPark & BusinessValue & ITvalue 前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。

索引

规范梗概

规范说明

此规范为参考规范，不全是硬性要求，部分硬性约定见下一条书写规范，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。

结构说明

-- 项目结构
----|---- CSS文件结构
----|---- JS文件结构

书写规范

样式与内容分离

项目结构

--- 

 |---- index.html             入口页    
 |---- js/                    JS //具体见JS细化结构                 
 |---- css/                   CSS //具体见CSS细化结构

重构步骤约定

  1. index.html 全部样式附着于 class="xxx" 注： 此时文件中不包含任何一个 id="xxx"
  2. 为上一步书写 CSS style
    [至此重构完成]
  3. 开始书写js交互文件，使用 ID 和 Class 定位被操作句柄
  4. 向 index.html 中需要的地方添加 id="xxx" 及 data-xxx="xxx"
    [至此交互效果完成]

命名规范

格式&编码

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

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种顺序均可

.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嵌套规则

/* 推荐嵌套层级 */
  <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>
<!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>
</head>

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库文件
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
JSON格式规范

参考JSON Style Guide翻译，原版：Google JSON Style Guide

HTML 细化规范

Responsive Web 规范

从设计之处就坚持"Mobile First"的理念，在重构页面的时候要灵活采取响应式的解决方案。

响应式实现途径
<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]-->

@media screen and (max-width: 40.5em) {

  .product-img {
    width: auto;
    float: none;
  }
}
@media screen and (max-width: 480px) {
}

$(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;
}

html {

	-webkit-text-size-adjust: none;
}

<!--[if lt IE 9]>

	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Newletter 制作规范

更多细节参考下面链接：
12 Killer Tips and Tricks for Building HTML Email
Coding HTML Newsletters(EDM’s)

生产力工具推荐(Mac)

for more app detial check -> IUSETHIS

前端相关工具
其他效率工具
其他收集

相关技巧

Wiki page index

参考数据

涉及到 设计->重构->兼容性->测试 时可参考各浏览器的占用情况
-- updated: 2012-08 via Google Analytics of GeekPark

总浏览器分布占有率
Chrome38.41%
IE23.10%
Mozilla Agent9.57%
Android Browser9.02%
Firefox7.99%
Safari7.09%
Safari (in-app)2.45%
Opera0.86%
IE版本分布占有率
IE 857.73%
IE 921.63%
IE 610.87%
IE 79.03%
IE 100.70%
移动设备占有率
iOS57.99%
Android40.72%
Nokia0.55%
Windows Phone0.49%
屏幕分辨率占有率
1366x76820.23%
1440x90013.17%
1280x80012.85%
320x48010.05%
1024x7685.93%

此规范基于 MIT License 开源，持续更新维护中，欢迎 Star 或 Fork 本项并目通过 Pull Request 贡献规范，请在这里反馈 创建[issues]

[src="" 问题]: http://js8.in/555.html "src="" 问题" [a标签占位符问题]: http://www.v2ex.com/t/48511/ "a标签占位符问题"