编写习惯

命名语义化可以使用驼峰式写法 mainNav

mainNav主导航
subNav 二级导航
error  错误的信息以红色显示   而不要使用red

差的名称                     好的名称
Red                         error
leftColumn（左边列）         secondaryContent

js中的命名习惯  变量可以用 aaa_bb

js中的方法习惯  变量可以用 aaaBB

要合理利用css的继承关系

<style>
    .Content{font:12px '微软雅黑';}
    .secondaryContent{font:12px '微软雅黑';}
    .Main{font:12px '微软雅黑';}
</style>
<div class="Content">
    <div class="secondaryContent">打了打进来的萨克</div>
    <div class="Main">的垃圾多了</div>
</div>    

将不必要的标记减少到最少

<menu id="leftMenu">
    <ul>
        <li>数据库的垃圾</li>
    </ul>
</menu>
下面是不合理的方法（
<div id="leftMenu">
    <menu>
        <ul>
            <li>数据库的垃圾</li>
        </ul>
    </menu>
</div>）

对代码进行注释

Css注释
/* Body style */
Body{font-size:67.5%} /* Set the font size */

Javascript头部注释
/*
+----------------------------------------------------------------------------------------------------
|  global js      : 全局js(包括头部、底部等公用部分)
|  $(window).load : 页面载入完成后执行部分
|  fn.hoverDelay  : 鼠标延迟插件，可全局调用
|  ==================================================================================================
|  @myMsg         : 文字信息语言包,默认英文
|  success        : 成功提示信息
|  error          : 错误提示信息
|  tips           : 其它提示信息
|  constant       : 页面文字
|  ==================================================================================================
|  @mylib            : 行内初始化函数，全局以外的js全部封装到这里，通过点运算符进行以下入口调用
|  index_page        : 首页
|  register_page     : 注册页
|  pList_page        : 产品列表页
|  nav_sidebar       : 左侧导航
|  pShow_page        : 产品展示页
|  artShow_page      : 文章页
|  member_page       : 会员中心页
|  cart_page         : 购物车页[step1,step2,step3,addList,validate]
|  search_page       : 搜索页
|  account_page      : 帐户管理页
|  ==================================================================================================
|  @globalFn                                 : 全局函数(可在任意地方调用)
|  ulToSelect([obj][,callback])               : ul模拟select
|  copyToClipboard(txt)                       : 复制文字到剪切板
|  loadEditor(obj,mode[,callback])            : 加载编辑器
|  integerValidate(obj[,min][,max][,callback]): 整数输入
|  addInputEvent(obj,callback)                : 输入事件监听
|  ajaxLoad(options)                          : ajax页面内容加载
|  clickToClose([obj][,callback][,callback2]) : 点击空白处关闭对象
|  ==================================================================================================
|  Author       : Aaron
|  Date started : 2013-1-6
+--------------------------------------------------------------------------------------------------*/

//@global js
$(function(){}

结构注释
/* Tpography
----------------------------*/

自我提示（遇到问题的话）
/* 使用解决方案
解释这个修复方法的URL */

TODO表示需要以后进行修改         /* :TODO; 记得删除这条规则 */
BUG表示代码或特定浏览器遇到问题   /* :BUG; */
KLUDGE表示不完善的权益之计       /* :KLUDGE; */

assets     框架类库文件夹
common.css 公用css

其他

1. 给元素设置float属性，则它完全脱离文档流，不占空间。

2. // 是js中的注释 css的是/* */

3. 遮罩层

<style type="text/css">
      .overlay{
          position: fixed;top: 0;right: 0;bottom: 0;left: 0;
          background: rgba(0,0,0,.5);
      }
      .popover{
          position: absolute;top: 50%;left: 50%;
          margin: -200px auto auto -250px;
          width: 500px;height: 400px;
          background: #fff;
      }
      .popover header span{
          position: absolute;right: 0;top: 0;
          line-height: 30px;
      }
      .pop-content{
          padding: 15px;
      }
      .popover footer{
          position: absolute;right: 0;bottom: 0;left: 0;
          padding: 15px;
          text-align: center;
      }
  </style>
<div class="overlay">
    <div class="popover">
        <header><span>关闭</span></header>
        <div class="pop-content"></div>
        <footer><input type="submit" value="提交"></footer>
    </div>
</div>

 4. Section分块 可以代替div

<img width=“100”height=“20”>
这种可以去掉 宽高

 5. 清除浮动

.clearfix::after,clearfix::before{              比配元素浮动 它父级一定要清除浮动  
Content:” “;　　　　　　　　　　　　　　　　　　　　　　　　　　　 父级如果是浮动不需要清除
Display:table;
Clear:both;
}