编码规范

• tab用两个空格表示–这是唯一能保证在所有环境下获得一致展现的方法
• 嵌套元素应当缩进一次（即两个空格）
• 对于属性的定义，最好全部使用双引号

• 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明
• 强烈建议为 html 根元素指定 lang 属性
• 最好设置<meta http-equiv="X-UA-Compatible" content="IE=Edge">
• 根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值
• 为选择器分组时，将单独的选择器单独放在一行
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格
• 声明块的右花括号应当单独成行
• 每条声明语句的 : 后应该插入一个空格
• 为了获得更准确的错误报告，每条声明都应该独占一行
• 所有声明语句都应当以分号结尾
• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格
• 十六进制值应该全部小写，例如，#fff
• 为选择器中的属性添加双引号，例如，input[type="text"]

• 不要使用 @import，与

  标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题

• 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。这样做的关键因素是为了错误检测

• 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

• 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑

  .selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }

语义化

1.语义化标签优先

反例：

<div class="article_title">标题</div>
<div class="the_content">
   这篇主题讲的是
   <div class="darkbold">代码规范</div>
</div>

更好：

<h1>标题</h1>
<p>这篇主题讲的是<b>代码规范</b></p>

2.基于功能命名、基于内容命名、基于表现命名

反例：

<div class="m"></div>
<div class="left"></div>
<div class="link"></div>

更好：

<div class="color"></div>
<div class="success"></div>
<div class="login"></div>

3.简略、明了、无后患，class 名称应当尽可能短，并且意义明确

反例：

<div class="floatLeft"></div>
<div class="bgblue"></div>
<div class="mt30"></div>

更好：

<div class="theme-color"></div>
<div class="music"></div>
<div class="clearfix"></div>

4.所有命名都使用英文小写

反例

<div class="Main"></div>

更好：

<div class="main"></div>

5.命名用引号包裹

反例：

<div id=header></div>

更好：

<div id="header"></div>

6.用中横线连接

反例：

<div class="modModal"></div>

更好：

<div class="mod-modal"></div>

7.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)

反例：

<div class="light-grey"></div>

更好：

<div class="text-lesser"></div>

8.常见命名具体实例

.wrap或.wrapper  /* 用于外侧包裹*/
.container或 .ct /* 包裹容器*/
.header          /* 用于头部*/
.body            /* 页面 body*/
.footer          /* 页面尾部*/
.aside,.sidebar  /* 用于侧边栏*/
.content         /* 和header footer 对应，用于主要内容*/
.navigation      /* 导航元素*/
.pagination      /* 分页*/
.tabs > .tab     /* tab 切换*/
.breadcrumbs     /* 导航列表、面包屑*/
.dropdown        /* 下拉菜单*/
.article         /* 文章*/
.main            /* 用于主体*/
.thumbnail       /* 头像，小图像*/
.media           /* 媒体资源*/
.panel           /* 面板*/
.tooltip         /* 鼠标放置上去的提示*/
.popup           /* 鼠标点击弹出的提示*/
.button,.btn     /* 按钮*/
.ad              /* 广告*/
.subnav          /* 二级导航*/
.menu            /* 菜单*/
.tag             /* 标签*/
.message或.notice /* 提示消息*/
.summary         /* 摘要*/
.logo            /* logo*/
.search          /* 搜索框*/
.login           /* 登录*/
.register        /* 注册*/
.username        /* 用户名*/
.password        /* 密码*/
.banner          /* 广告条*/
.copyright       /* 版权*/
.modal或.dialog  /* 弹窗*/

9.常见命名分类

var 名字 = {
  状态: [
    'inverse',
    'toggled',
    'switched',
    'original',
    'initial',
    'identified',
    'disabled',
    'loading',
    'pending',
    'syncing',
    'default'
  ],
  修饰: [
    'dark',
    'light',
    'shaded',
    'flat',
    'ghost',
    'maroon',
    'pale',
    'intense',
    'twisted',
    'narrow',
    'wide',
    'smooth',
    'separate',
    'clean',
    'sharp',
    'aligned'
  ],
  元素: [
    'pagination',
    'modal',
    'popup',
    'article',
    'story',
    'flash',
    'status',
    'state',
    'media',
    'block',
    'card',
    'teaser',
    'badge',
    'label',
    'sheet',
    'poster',
    'notice',
    'record',
    'entry',
    'item',
    'figure',
    'square',
    'module',
    'bar',
    'button',
    'action',
    'knob'
  ],
  布局: [
    'navigation',
    'wrapper',
    'inner',
    'header',
    'footer',
    'aside',
    'section',
    'divider',
    'content',
    'container',
    'panel',
    'pane',
    'construct',
    'composition',
    'spacing',
    'frame'
  ]
}