一、HTML
    1.文档声明
    <!doctype html>
    2.标签注意嵌套规则
    3.合理使用语义性标签
    4.合理的代码缩进（4个空格）

    二、CSS
    1.基础语法
    为了避免 HTML 和 CSS 文件编码不同时造成中文解析乱码，造成的不必要的麻烦，CSS 文件头部统一加上文件对应的编码。
    charset: “utf-8”;
    使用4个空格做为缩进，保证在各种环境下显示一致。
    使用class定义样式，禁止使用id。
    禁止使用内联样式，除非为配合js而设置的display。
    统一使用小写字母。字体名称以及特殊的 CSS 属性/值（translateX等）不要求强制小写。
    所有十六进制的值都采用小写字母，如#ffffff。
    十六进制的值能简写时，请简写，如#fff。
    不要为0值增加单位，如margin : 0; 而不是 margin : 0px。

    2.class命名
    全小写，并使用中杠线”-“命名方法，如”ico-to8to”。
    命名尽量用英文单词，避免过度简写。.ico足够表示这是一个图标，而.i不代表任何意思。
    使用有意义的名称；使用结构化或者作用目标相关的，而不是抽象的名称。
    命名时使用最近的父节点或者父class作为前缀。


    新消息

    土巴兔新域名


    定义样式时，尽量用class来定义 ，当某个标签在某父元素下唯一时，可以使用后代选择



    <p class=”tip-box-bd>




    .tip-bd{ … }
    .tip-box-bd { … }




    .tip p{ … }
    3.代码注释
    普通注释，注释文字左右各留一个空格。
    / 普通注释 /
    模块注释，需要包含模块名及模块说明：
    / ==========================================================================
    表单基类
    用于表单填写
    ==========================================================================     /
    扩展模块注释，需要包含模块说明：
    / ==========================================================================
    表单扩展 【右侧发标表单】
    给.mod_form添加扩展类.mod_form_wide
    ==========================================================================     /
    代码块之间间隔两行。

    4.样式代码书写,
    相关的属性声明应归为一组，并按照下面的顺序排列。每个属性都归为一行

    .header {
    / 显示属性 position /
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: block;
    float: left;
    / 显示属性 position /

    / 盒模型 Box-model /
    width: 100px;
    height: 200px;
    margin: 10px 20px;
    padding: 10px 0;
    border: 1px solid #eee;
    background: #fff;
    / 盒模型 Box-model /

    / 文本属性 /
    font-size: 10px;
    text-align: center;
    line-height: 20px;
    color: #333;
    word-space: break-all;
    / 文本属性 /

    / 其他属性 /
    opacity: 0.1;
    zoom: 1;
    curspor: pointer;
    / 其他属性 /

    / css3 属性 /
    box-shadow: inset 1px 2px 1px #fff, 1px 2px 3px 3px #fff;
    -webkit-transform: translate(100px, -100px);
    }

    PS:这样写能在代码层面上有效的减少浏览器的重绘与回流。浏览器的重绘与回流主要与显示属性和盒模型有关。

    对比&综述
    前端工程化的建设，早期的做法是使用Grunt、Gulp等构建工具。但本质上它们只是一个任务调度器，将功能独立的任务拆解出来，按需组合运行任务。如果要完成前端工程化，这两者配置门槛很高，每一个任务都需要开发者自行使用插件解决，而且对于资源的依赖管理能力太弱。
    在国内，百度出品的 fis 也是一种不错的工程化工具的选择，fis内部也解决了资源依赖管理的问题。因笔者没有在项目中实践过fis，所以不进行更多的评价。
    webpack以一种非常优雅的方式解决了前端资源依赖管理的问题，它在内部已经集成了许多资源依赖处理的细节，但是对于使用者而言只需要做少量的配置，再结合构建工具，很容易搭建一套前端工程解决方案。
    基于webpack的前端自动化工具，可以自由组合各种开源技术栈（Koa/Express/其他web框架、webpack、Sass/Less/Stylus、Gulp/Grunt等），没有复杂的资源依赖配置，工程结构也相对简单和灵活。