样式重置reset

使用主样式表

/* master.css */
@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");

重置你的CSS样式

normalize http://necolas.github.io/normalize.css/
reset http://html5reset.org/
http://www.zhangxinxu.com/wordpress/2010/08/html5-css-reset/

保留一个有用的CSS类库

.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

组织你的CSS样式，使用标志。“将样式表分成特定的部分：全局样式 - （正文，段落，列表等），页眉，页面结构，标题，文本样式，导航，表单，注释，附件。

尽量减少选择器
使用CSS常量进行更快速的开发。
/*

Dark grey (text): #333333

Dark Blue (headings, links) #000066

Mid Blue (header) #333399

Light blue (top navigation) #CCCCFF

Mid grey: #666666

*/

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/
工作流程：调试

• { border: 1px solid #f00; }

html { font-size:100.01%; }
body { font-size:1em; }

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
                outline:0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
                background:transparent;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    body {
        -webkit-text-size-adjust: none;
    }
*, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }