css書寫規範

css中id或class命名規範：

最好不要在你的類名或者ID名中去加入顏色或者長寬的尺寸等帶有屬性的名字。

先看一個例子：

　　.l-123f { color: red; }

　　若是你第一次看到這個類名，你能在css文件馬上找到這個class嗎？估計很難，由於這個類的名稱只是某一我的能理解的符號再沒有其餘意義，因此這裏沒有一個準確的方法可以讓你當即說出來。

讓咱們來看下這個類名定義：

　　.right-red { color:red; }

　　你可能很明確的知道這個class選擇符的所起的做用。可是這裏還有個問題，當你在一星期的時間須要從新設計。在從新設計的時候，這個模塊被放置到了左邊，並且仍是綠色。這個類就再也不有存在的價值。因此如今不得不選擇，要麼改變全部的屬性值，要麼放着它不動，這可能致使混亂。

　　最好不要在你的類名或者ID名中去加入顏色或者長寬的尺寸等帶有屬性的名字。你應該避免任何的屬性值都是直接的詞彙。（如box）直接屬性可能會致使內容的分離。

　　讓咱們來看看最合理ID/CLASS的命名規範：

　　.product-description { color: red; }

　　用這種樣式定義的product-description（產品描述），無論你怎麼改變，她都是那麼的乾淨清晰。

 

1、使用CSS縮寫

使用縮寫能夠幫助減小你CSS文件的大小，更加容易閱讀。css縮寫的主要規則請參看《經常使用css縮寫語法總結》，這裏就不展開描述。

2、明肯定義單位，除非值爲0

忘 記定義尺寸的單位是CSS新手廣泛的錯誤。在HTML中你能夠只寫width=100，可是在CSS中，你必須給一個準確的單位，好比：width: 100px width:100em。只有兩個例外狀況能夠不定義單位：行高和0值。除此之外，其餘值都必須緊跟單位，注意，不要在數值和單位之間加空格。

3、區分大小寫

當 在XHTML中使用CSS，CSS裏定義的元素名稱是區分大小寫的。爲了不這種錯誤，我建議全部的定義名稱都採用小寫。class和id的值在HTML 和XHTML中也是區分大小寫的，若是你必定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML裏的標籤是一致的。前的元素限定

4、取消class和id

當你寫給一個元素定義class或者id，你能夠省略前面的元素限定，由於ID在一個頁面裏是惟一的，class能夠在頁面中屢次使用。你限定某個元素毫無心義。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
能夠寫成
#content { /* declarations */ }
.details { /* declarations */ }
這樣能夠節省一些字節。

5、默認值

一般padding的默認值爲0，background-color的默認值是transparent。可是在不一樣的瀏覽器默認值可能不一樣。若是怕有衝突，能夠在樣式表一開始就先定義全部元素的margin和padding值都爲0，象這樣：
* {
margin:0;
padding:0;
}

6、不須要重複定義可繼承的值

CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中能夠直接繼承，不須要重複定義。可是要注意，瀏覽器可能用一些默認值覆蓋你的定義。

7、最近優先原則

若是對同一個元素的定義有多種，以最接近(最小一級)的定義爲最優先，例若有這麼一段代碼
Update: Lorem ipsum dolor set
在CSS文件中，你已經定義了元素p，又定義了一個classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

這兩個定義中，class=update將被使用，由於class比p更近。你能夠查閱W3C的《 Calculating a selector’s specificity》 瞭解更多。

8、多重class定義

一個標籤能夠同時定義多個class。例如：咱們先定義兩個樣式，第一個樣式背景爲#666；第二個樣式有10 px的邊框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在頁面代碼中，咱們能夠這樣調用
這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣作是能夠的，你能夠嘗試一下。

九.使用子選擇器(descendant selectors)

CSS初學者不知道使用子選擇器是影響他們效率的緣由之一。子選擇器能夠幫助你節約大量的class定義。咱們來看下面這段代碼：
〈div id=subnav〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemselected〉 〈a href=# class=subnavitemselected〉 Item 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Item 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉
這段代碼的CSS定義是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你能夠用下面的方法替代上面的代碼
〈ul id=subnav〉
〈li〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈/ul〉
樣式定義是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子選擇器可使你的代碼和CSS更加簡潔、更加容易閱讀。

10、不須要給背景圖片路徑加引號
爲了節省字節，我建議不要給背景圖片路徑加引號，由於引號不是必須的。例如：
background:url(images/***.gif) #333;
能夠寫爲
background:url(images/***.gif) #333;
若是你加了引號，反而會引發一些瀏覽器的錯誤。

11、組選擇器(Group selectors)

當一些元素類型、class或者id都有共同的一些屬性，你就可使用組選擇器來避免屢次的重複定義。這能夠節省很多字節。
例如：定義全部標題的字體、顏色和margin，你能夠這樣寫：
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
若是在使用時，有個別元素須要定義獨立樣式，你能夠再加上新的定義，能夠覆蓋老的定義，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }

12、用正確的順序指定連接的樣式

當 你用CSS來定義連接的多個狀態樣式時，要注意它們書寫的順序，正確的順序是：:link :visited :hover :active。抽取第一個字母是LVHA，你能夠記憶成LoVe HAte(喜歡討厭)。爲何這麼定義，能夠參考Eric Meyer的《Link Specificity》。
若是你的用戶須要用鍵盤來控制，須要知道當前連接的焦點，你還能夠定義:focus屬性。:focus屬性的效果也取 決與你書寫的位置，若是你但願聚焦元素顯示:hover效果，你就把:focus寫在:hover前面；若是你但願聚焦效果替代:hover效果，你就 把:focus放在:hover後面。

十三.清除浮動

一個很是常見的CSS問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層裏嵌套的子層超出了外層的範圍。
一般的解決辦法是在浮動層後面添加一個額外元素，例如一個div或者一個br，而且定義它的樣式爲clear: both。這個辦法有一點牽強，幸運的是還有一個好辦法能夠解決，參看這篇文章《How To Clear Floats Without Structural Markup》(注：本站將盡快翻譯此文)。

上面2種方法能夠很好解決浮動超出的問題，可是若是當你真的須要對層或者層裏的對象進行clear的時候怎麼辦？一種簡單的方法就是用overflow屬性，這個方法最初的發表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被普遍討論。

上面那一種clear方法更適合你，要看具體的狀況，這裏再也不展開論述。另外關於float的應用，一些優秀的文章已經說得很清楚，推薦你閱讀：《Floatutorial》、《Containing Floats》和《Float Layouts》

十4、橫向居中(centering)

這是一個簡單的技巧，可是值得再說一遍，由於我看見太多的新手問題都是問這個：CSS如何橫向居中？你須要定義元素的寬，而且定義橫向的margin，若是你的佈局包含在一個層(容器)中，就象這樣：
undefined
你能夠這樣定義使它橫向居中：
#wrap {
width:760px; /* 修改成你的層的寬度 */
margin:0 auto;
}
可是IE5/Win不能正確顯示這個定義，咱們採用一個很是有用的技巧來解決：用text-align屬性。就象這樣：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改成你的層的寬度 */
margin:0 auto;
text-align:left;
}
第一個body的text-align:center; 規則定義IE5/Win中body的全部元素居中(其餘瀏覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。

十5、導入(Import)和隱藏CSS

由於老版本瀏覽器不支持CSS，一個一般的作法是使用@import技巧來把CSS隱藏起來。例如：
@import url(main.css);
然而，這個方法對IE4不起做用，這讓我非常頭疼了一陣子。後來我用這樣的寫法：
@import main.css;
這樣就能夠在IE4中也隱藏CSS了，呵呵，還節省了5個字節呢。想了解@import語法的詳細說明，能夠看這裏《centricle’s css filter chart》

十6、針對IE的優化

有些時候，你須要對IE瀏覽器的bug定義一些特別的規則，這裏有太多的CSS技巧(hacks)，我只使用其中的兩種方法，無論微軟在即將發佈的IE7 beta版裏是否更好的支持CSS，這兩種方法都是最安全的。

1.註釋的方法

(a)在IE中隱藏一個CSS定義，你可使用子選擇器(child selector):
html>body p {
/* 定義內容 */
}

(b)下面這個寫法只有IE瀏覽器能夠理解(對其餘瀏覽器都隱藏)
* html p {
/* declarations */
}

(c)還有些時候，你但願IE/Win有效而IE/Mac隱藏，你可使用反斜線技巧：
/* */
* html p {
declarations
}
/* */

2.條件註釋(conditional comments)的方法

另一種方法，我認爲比CSS　Hacks更加經得起考驗就是採用微軟的私有屬性條件註釋(conditional comments)。用這個方法你能夠給IE單獨定義一些樣式，而不影響主樣式表的定義。就象這樣：
undefined

十7、調試技巧：層有多大？

當 調試CSS發生錯誤，你就要象排版工人，逐行分析CSS代碼。我一般在出問題的層上定義一個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用 border，通常狀況也是能夠的，但問題是，有時候border 會增長元素的尺寸，border-top和boeder-bottom會破壞縱向margin的值，因此使用background更加安全些。
另一個常常出問題的屬性是outline。outline看起來象boeder，但不會影響元素的尺寸或者位置。只有少數瀏覽器支持outline屬性，我所知道的只有Safari、OmniWeb、和Opera。

十8、CSS代碼書寫樣式我的的書寫習慣。在通過不斷實踐後，我決定採用下面這樣的書寫樣式：

selector1,

在寫CSS代碼的時候，對於縮進、斷行、空格，每一個人有每
selector2 {
property:value;
}
當使用聯合定義時，我一般將每一個選擇器單獨寫一行，這樣方便在CSS文件中找到它們。在最後一個選擇器和大括號{之間加一個空格，每一個定義也單獨寫一行，分號直接在屬性值後，不要加空格。
我習慣在每一個屬性值後面都加分號，雖然規則上容許最後一個屬性值後面能夠不寫分號，可是若是你要加新樣式時容易忘記補上分號而產生錯誤，因此仍是都加比較好。
最後，關閉的大括號}單獨寫一行，空格和換行有助與閱讀。

---------------------

CSS命名參考

一、經常使用的CSS命名規則：
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column

二、直觀命名

當在設計Web頁面以及須要對一個div進行標識的時候，最天然的想法就是使用能夠描述元素所在頁面位置的詞彙來對其命名。這種方法使得類以及id的名稱以下面所示：

自上而下小組：top-panel

橫向：horizontal-nav

左面：left-side

中心-欄目：center-column

右面：right-col

這些是CSS以及XHTML類和id的有效命名方式。這些詞彙簡單而且可以令人顧名思義，所以知足了標識頁面元素以及相應的CSS樣式的須要。

但問題是這樣的名稱同頁面內容的特定表達方式相關聯。這些命名參考了某種特定頁面佈局中的頁面元素位置，所以在這樣的佈局以外使用就會顯得不合適甚至形成理解混亂。同時，這些命名沒有涉及文檔內容的結構。所以，下面給出了對CSS類以及ID命名更好的方法。

三、結構化命名

結構化的標記意味着表達方式/位置信息同內容的徹底分離——這其中包括出如今標記（markup）中的類和id名稱。

有標記的相關信息都是用來描述文檔的結構而不是外觀。這樣的特色使得咱們能夠經過簡單的改變CSS的方式來對不一樣外觀格式下的內容（content）以及標記（markup）進行重用。當你理解這種方式時，很容易就能夠發現採用頁面位置來爲類以及id命名的方式在處理如音頻（audio）等外觀格式上顯得很是不合適。所以，應當根據在文檔中的使用目的而非出現位置來對類以及id進行結構化命名。

能夠按照以下所示的結構化方式來對類以及id名稱命名：

頂部搶眼部分：branding

導航部分：main-nav

主要內容部分：main-content

這些名字同直觀命名方式同樣很是易懂，但他們描述了頁面元素的做用而非位置。這使得代碼更加符合使用純粹的結構化標記（structural markup）的初衷，即開發人員能夠在不改變標記的狀況下對各類各樣媒體下的顯示格式進行處理。

即便你不打算在其餘的媒體上對Web頁面進行格式修改，使用結構化命名方式還能夠幫助你在往後的站點升級或從新設計中更爲輕鬆。例如，結構化命名避免了當一個div同id right-column移動到頁面左邊後所帶來的混亂。對div sidebar的採用這樣的命名方式就顯得更加適當，由於不管它出如今頁面的哪一邊，這個名字仍然對開發人員來講直觀易懂。

四、慣例

Andy Clarke分析了40份由推崇標準化Web設計理念的開發人員所設計的Web站點的源代碼。儘管類以及id名稱很不統一，可是仍是發現了一些頻繁出現的經常使用名稱。這裏給出了最經常使用類/id名稱的示例列表：

header

content

nav

sidebar

footer

若是要查看完整的列表，能夠看看最多見命名慣例表

這些常見的類以及id名稱是否標誌着一種標準的誕生或是廣泛接受慣例的造成呢？儘管這是我所但願的，但我並不這麼認爲。個人確但願可以看見一整套對於咱們天天均可以看到的經常使用頁面元素的命名標準。同時，使用標準化的命名方式可使得尋找頁面元素以及對Web站點升級帶來方便，尤爲當須要在由不一樣開發人員在不一樣時間所開發站點中換來換去工做的時候。

review:

大的佈局div能夠之外觀的方式命名(如header,footer)，其餘的我以爲仍是應該以描述所含內容的標準來命名（如menu，news）

五、自定義命名：

根據w3c網站上給出的,最好是用意義命名
好比：是重要的新聞高亮顯示（像紅色）
有兩種
.red{color:red}
.important-news{color:red}
很顯然第二種傳達的意義更加明確,因此儘可能不要用意義不明確的做爲本身自定義的名字