1. 合理運用Reset
這可以簡單到僅僅將所有元素中的margin和padding屬性去掉:

html,?body,?div,?h1,?h2,?h3,?h4,?h5,?h6,?ul,?ol,?dl,?li,?dt,?dd,?p,?blockquote,
pre,?form,?fieldset,?table,?th,?td?{?margin:?0;?padding:?0;?}

?

2. 按字母排序

div#header?h1?{
?border-bottom:?1px?solid?#dedede;
?color:?#000;
?font-size:?18px;
?line-height:?24px;
?margin-right:?48px;
?position:?relative;
?z-index:?101;
}

經過排序的屬性列表很容易進行查找。

3. 有組織的

你應該組織你的樣式，這樣你就可以比較容易的找到想要的內容以及放在一起的相關條目。這可以使用注釋的方法。例如，我是這樣組織我的樣式表的:

/*****Reset*****/
Reset

/*****Basic?Elements*****/
為基本元素定義樣式:?body,?h1-h6,?ul,?ol,?a,?p,?etc.

/*****Generic?Classes*****/
定義一些單獨的樣式，比如，浮動、去掉元素的底部邊距等。
是的，可能他們不夠語義化，但是，它們對有效的編碼是很有效的。

/*****Basic?Layout*****/
定義基本模板:?頭部、底部、等，用來定義網站的基本結構

/*****Header*****/
定義頭部的所有元素

/*****Content*****/
定義內容區域的所有元素

/*****Footer*****/
底部樣式

/*****Etc*****/
繼續定義其它樣式通過使用注釋和對相似元素進行分組，可以更快的找到你需要的內容。

?

4. 一致性原則

無論你現在以何種方式編碼，保持下去。我十分討厭關于完全單行或者完全多行的爭議，這本身是沒有什么可爭議的! 每個人都有自己的看法，所以就用你認為對的并自始至終保持下去。

就我個人而言，我使用混合模式，如果一個樣式有超過3條屬性，我就采用多行：

div#header?{?float:?left;?width:?100%;?}
div#header?div.column?{
?border-right:?1px?solid?#ccc;
?float:?right;
?margin-right:?50px;
?padding:?10px;
?width:?300px;
}
div#header?h1?{?float:?left;?position:?relative;?width:?250px;?}

我使用這種方法是因為我的文本編輯器一行在換行前正好能容納大概3個屬性，如果沒有太多的屬性，顯然單行要比多行更易讀。

5. 從正確的地方開始

在你寫好你的標簽之前不要動你的樣式文件

當我準備開工的時候，在我創建一個CSS文件之前，我檢查并對整個文檔進行編碼(HTML)，從開始body標簽到結束整個body標簽。不添加任何多余的div、id或class。我會添加一些通用的div，比如頭部，內容，底部，因為我知道這些東西肯定會有。

通過先編碼整個文檔，你可以避免出現多DIV癥或多類癥，這些毛病有的時候可能是致命的！ 你只需要在你開始寫CSS和確定需要另外的東西來實現相關效果的時候再加入它們。

使用CSS的向后選擇器來定義子元素。不要直接自動的為元素添加類或id。請記住，如果一個文檔沒有良好的格式(結構)，CSS是毫無價值的。

轉載于:https://www.cnblogs.com/qumao5736/archive/2009/02/26/1398699.html

總結

以上是生活随笔為你收集整理的快速写出较好CSS的5种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。