使用主樣式表

/* master.css */
@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");
<style type="text/css" media="Screen">
@import url("css/master.css");
</style>

重置你的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樣式梭姓，使用標(biāo)志∶顺伲“將樣式表分成特定的部分：全局樣式 - （正文好渠，段落俩滥，列表等），頁眉，頁面結(jié)構(gòu)猪狈，標(biāo)題抛蚁，文本樣式陈醒，導(dǎo)航，表單瞧甩，注釋钉跷，附件。

盡量減少選擇器
使用CSS常量進(jìn)行更快速的開發(fā)肚逸。
/*

Dark grey (text): #333333

Dark Blue (headings, links) #000066

Mid Blue (header) #333399

Light blue (top navigation) #CCCCFF

Mid grey: #666666

*/
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />
https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/
工作流程：調(diào)試

• { 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;
    }