CSS編寫的技巧介紹

大家知道CSS編寫的技巧嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

1.重置

首先，很認真的告訴你，總是要重置某些分類。無論你是使用 Eric Meyer Reset、YUI Reset或者你自己編寫的重置代碼，只要使用就對了。

它能很簡單的移除所有元素的填充(padding)和邊距(margin)：

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

Eric Meyer Reset和YUI Reset都是非常強大的，但是對於我而言，它們走的太遠了。我覺得你最終需要重置一切，然後重新定義所有元素的屬性。這就是為什麼Eric Meyer推薦更有效的使用(重置樣式表)，而你不要只是使用他的重置樣式表，將它拖放到你的項目中。調整它(的重置樣式表)，建立屬於自己的重置樣式 表。

噢，請停止使用：

* { margin: 0; padding: 0; }

花更多的時間去制作它，當你移除了填充(padding)你認為單選按鈕會發生什麼變化?表單元素有時能夠做些時髦的事情，所以最有效的方式就是將他們獨立。

2.排序

一個小的測試

這個例子就是要讓你思考如何更快的找到右邊距屬性?

Example#1

div#header h1 {

z-index: 101;

color: #000;

position: relative;

line-height: 24px;

margin-right: 48px;

border-bottom: 1px solid #dedede;

font-size: 18px;

}

Example#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;}

你不能告訴我Example#2不能更快的找到右邊距屬性。根據字母排序你的元素屬性。一致的創建你的CSS，將幫助你節省花費在尋找一個特殊屬性的時間。

我知道一些人用這樣的方法去組織代碼，其他人又用另一種方法去組織，但是在我的公司，我們協商一致做出決定，所有的代碼都將按照字母排序來組織。通過這樣組織代碼與其他人協同工作一定是有幫助的。當我碰到屬性沒有按照字母排序的層疊樣式表我每一次都會退縮。

3.組織

你應該組織你的樣式表以致相關的內容靠在一起，更簡單的找到想要的。使用更有效的注解。舉個例子，這是我如何構造我的層疊樣式表：

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

移除元素的填充(padding)和邊距(margin)。

/*****Basic Elements*****/

定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等.

/*****Generic Classes*****/

定義簡單的風格，好像浮動的某一側, 移除元素的下邊距, 等

當然，它們大部分都與我們希望的語義不相關,但是它們是高效處理代碼所必須的。

/*****Basic Layout*****/

定義基本的模板: header, footer等. 幫助定義網頁布局的基本元素

/*****Header*****/

定義所有Hearder元素

/*****Content*****/

定義所有內容框內的元素

/*****Footer*****/

定義所有Footer的元素

/*****Etc*****/

定義其他的選擇器。

通過注解和歸類相似元素的分組，將更快的找到你想要的。

4.一致性

無論你決定使用什麼方式去編寫代碼，保持一致。我已經對全部放在1行VS多行的CSS編寫編寫方式的爭論感到乏味和疲倦。這是不需要爭辯的。每個人都有自己的觀點，所以選擇一種你喜歡的工作方式，並在所有的樣式表中保持一致。

就我個人而言，我將使用兩者結合的方式。如果一個選擇器超過了3個屬性，我將截斷它采用多行的方式編寫。

div#header { float: left; width: 100%; }

div#header div.column {

border-right: 1px solid #ccc;

float: rightright;

margin-right: 50px;

padding: 10px;

width: 300px;

}

div#header h1 { float: left; position: relative; width: 250px; }

所以找到你喜歡的工作方式然後保持一致。

5.從正確的地方開始

在完成標記語言之前不要去嘗試靠近你的樣式表。

當我准備分割一張網頁的時候，創建CSS文件之前，我需要預覽並且標記body開標簽到body的閉合標簽之間的所有文檔。我不會增加額外的 DIV ,ID,或者類選擇器。我將會添加一些一般的DIV，就好像hearder、content、footer.因為我知道這些東西是現實存在的。

利用CSS子選擇器指定子元素;不要只是機械的給元素添加類或者ID選擇器。記住：沒有一個良好的格式化文檔(或者標記結構)CSS是無價值的。

相信大家已經學會CSS編寫的技巧了吧!感謝大家對我們網站的支持!

相關推薦：

CSSinput標簽簡介