Mozilla推薦的CSS屬性書寫順序及命名規則，mozillacss

Mozilla推薦的CSS屬性書寫順序及命名規則，mozillacss

傳說中的Mozilla推薦 

Java代碼  

1. /* mozilla.org Base Styles 
2.  * maintained by fantasai 
3.  */  
4. /* Suggested order: 
5.  * display 
6.  * list-style 
7.  * position 
8.  * float 
9.  * clear 
10.  * width 
11.  * height 
12.  * margin 
13.  * padding 
14.  * border 
15.  * background 
16.  * color 
17.  * font 
18.  * text-decoration 
19.  * text-align 
20.  * vertical-align 
21.  * white-space 
22.  * other text 
23.  * content 
24.  * 
25.  */  
26. ...  

來源：

Java代碼  

1. http://www.mozilla.org/css/base/content.css  

在懌飛’s Blog的這篇文章裡，又將上面的屬性分成了三組：顯示內容、自身屬性和文字屬性。在回複裡，inG補充這還和瀏覽器的解析過程有關：瀏覽器先對DOM定位，然後解析自身屬性，接著再解析內部對象。（沒找到相關的英文資料，有知情者還望告知） 

在Mozilla官方，其實並沒有推薦任何CSS書寫順序。很可能是某個開發人員在閱讀fantasai的這篇文章 mozilla.org Markup Reference 時，順便對fantasai的CSS源檔案產生了興趣，因此才有了上面的發現。 
字母排序 

NETTUTS上時不時有些好文章，這不，前不久，Trevor Davis就分享了一篇：5 Ways to Instantly Write Better CSS. 這篇文章中，推薦CSS的屬性按字母排序。 

優點是：簡單，任何人只要遵守，一看就明白。 

缺點是：太簡單，缺乏邏輯性。比如position, left, top等，這種緊關聯的屬性，如果都按字母排序，書寫和維護起來都不方便。Andy Ford推薦的排序 

Andy Ford是HTML和CSS方面的專家，最近寫了一篇文章：Order of the Day: CSS Properties. 文章推薦的CSS書寫順序為： 

Java代碼  

1.  1. Display & Flow  
2.  2. Positioning  
3.  3. Dimensions  
4.  4. Margins, Padding, Borders, Outline  
5.  5. Typographic Styles  
6.  6. Backgrounds  
7.  7. Opacity, Cursors, Generated Content  
8.   
9. 例子：  
10.   
11. el {  
12.     display: ;  
13.     visibility: ;  
14.     float: ;  
15.     clear: ;  
16.   
17.     position: ;  
18.     top: ;  
19.     right: ;  
20.     bottom: ;  
21.     left: ;  
22.     z-index: ;  
23.   
24.     width: ;  
25.     min-width: ;  
26.     max-width: ;  
27.     height: ;  
28.     min-height: ;  
29.     max-height: ;  
30.     overflow: ;  
31.   
32.     margin: ;  
33.     margin-top: ;  
34.     margin-right: ;  
35.     margin-bottom: ;  
36.     margin-left: ;  
37.   
38.     padding: ;  
39.     padding-top: ;  
40.     padding-right: ;  
41.     padding-bottom: ;  
42.     padding-left: ;  
43.   
44.     border: ;  
45.     border-top: ;  
46.     border-right: ;  
47.     border-bottom: ;  
48.     border-left: ;  
49.   
50.     border-width: ;  
51.     border-top-width: ;  
52.     border-right-width: ;  
53.     border-bottom-width: ;  
54.     border-left-width: ;  
55.   
56.     border-style: ;  
57.     border-top-style: ;  
58.     border-right-style: ;  
59.     border-bottom-style: ;  
60.     border-left-style: ;  
61.   
62.     border-color: ;  
63.     border-top-color: ;  
64.     border-right-color: ;  
65.     border-bottom-color: ;  
66.     border-left-color: ;  
67.   
68.     outline: ;  
69.     list-style: ;  
70.   
71.     table-layout: ;  
72.     caption-side: ;  
73.     border-collapse: ;  
74.     border-spacing: ;  
75.     empty-cells: ;  
76.   
77.     font: ;  
78.     font-family: ;  
79.     font-size: ;  
80.     line-height: ;  
81.     font-weight: ;  
82.     text-align: ;  
83.     text-indent: ;  
84.     text-transform: ;  
85.     text-decoration: ;  
86.     letter-spacing: ;  
87.     word-spacing: ;  
88.     white-space: ;  
89.     vertical-align: ;  
90.     color: ;  
91.   
92.     background: ;  
93.     ;  
94.     background-image: ;  
95.     background-repeat: ;  
96.     background-position: ;  
97.   
98.     opacity: ;  
99.     cursor: ;  
100.     content: ;  
101.     quotes: ;  
102.     }  

Andy的順序大體上和fantasai推薦的順序保持了一致，但細節上更具可操作性。 
SitePoint上還有個很熱烈的討論貼：How do you order your properties within a declaration block? 

我喜歡fantasai和Andy的書寫順序，但fantasai的順序中，“自身”屬性有點含混不清，Andy的則太細，難以記住。我覺得可以借鑒CSS 2.1 Specification中對CSS屬性的分類，將Andy的順序稍微調整下： 

   1. 影響文檔流的屬性（比如：display, position, float, clear, visibility, table-layout等） 
   2. 自身盒模型的屬性（比如：width, height, margin, padding, border等） 
   3. 排版相關屬性（比如：font, line-height, text-align, text-indent, vertical-align等等） 
   4. 裝飾性屬性（比如：color, background, opacity, cursor等） 
   5. 產生內容的屬性（比如：content, list-style, quotes等） 

事情永遠沒那麼簡單，比如下面這些困擾： 

   1. 對於shorthand怎麼處理？比如 border: 1px solid red; 其中border-width是和盒模型相關的，但border-color是裝飾性的。如何組織呢？ 
   2. 考慮到換膚功能，是否應該將color, background, border-color等和顏色相關的都放一塊？以方便以後修改。 
   3. 對於hacks如何處理？單獨放到css檔案最後面，還是和hack的屬性緊挨著好？ 
   4. 維護同事的css檔案時，對於新增加或有修改的屬性，如何注釋？如何書寫？ 
   5. 還有，考慮到CSS Sprite, 所有背景圖的選取器都放在一起？不過這已經超出本文的話題了：CSS選取器內屬性的順序和組織。 
   6. 更進一步的討論是：CSS檔案內的結構組織，以及多個CSS檔案的組織。 


CSS命名規則： 

　　Css和其他程式一樣，都是有範圍這個概念，有全域、類局部作用這些方式。 

　　舉個例子： 

　　p{background:#f00;}/* 範圍 ：全域 */ 

　　.div p{color:#000;}/* 範圍：div類中*/ 

　　介紹下Css幾種編寫方式和權重對比 

　　1）標籤：權值為0,0,0,1 

　　2）類：權值為0,0,1,0 

　　3）屬性選擇：權值為0,0,1,1 

　　4）ID：權值為0,1,0,0 

　　5）important的權值為最高1,0,0,0 

　　相信大家在編寫Css的時候，當項目比較大，內容比較多的時候，命名就是一件很頭痛的事情，而且一個塊裡面要表現不同狀態的樣式 ，這是有掌握命名規則是一把利器，能讓你工作起來事半功倍。大致如下：（轉載自：http://www.cssforest.org/blog /index.php?id=143，大家可以去這裡看，比較多的技術文章） 

　　要避免當狀態改變時名稱失去意義，最常見的就是用於布局的類名，如“left”、“right”，當左側邊欄不再是左側邊欄的時候，“left”這個名就沒有實際意義了。這與我們所推薦的 “命名要有意義”就相違背了，使用序號就更加有問題了。好像沒錯，不過有好長一段 時間都有個問題讓我很煩惱，如果一個頁面中同個模組出現一次以上，而且細節還不一樣，那後面出現的名稱應該叫什麼呢？難道“one”、“two”就不是序 號？其實我們要避免遇到的情況就是當狀態（表現）改變時，對應定義的類名不會失去意義。 

　　所謂的狀態（表現）改變，有幾種情況： 

   1. HTML不變，樣式定義改變。如果命名使用了表示某一狀態的名稱，如“red“、“font14“等，必定會引起定義與命名不符的情況，對後繼的影響會造成比較大的影響。 
   2. 樣式定義不變，HTML改變。HTML改變意味著類名可更換，也就是如果類名使用了表示某一狀態的名稱，反而更有利於修改。 
   3. 樣式定義與HTML都改變。只需要考慮不要出現第一種情況的結果就可以了。 

　　而實際情況並不是單純的某一種情況，更多的時候是混雜著出現的。 
　　規則 

　　[ 模組首碼 ] _ 類型 _ ( 作用 | 狀態 ) n _ [ 位置 n ] 

　　圖例說明： 

    * ( 必選 )：必需存在。 
    * [ 可選 ]：可根據需要選擇。 
    * |：多選一。 
    * n：可有多個。 

　　名詞說明： 

　　模組首碼 
    模組定義時使用的首碼。 
　　類型 
    定義類的內容類型。如輸入框、文本、段落等等。 
　　作用 
    定義類的作用，用於對類型的補充。 
　　狀態 
    定義類的狀態，用於對類型的補充。 
　　位置 
    定義類所使用的位置，如首頁、導航等等，不排除使用左、右這樣的詞，但應盡量避免。 
    * 每項都可有自己的一個縮寫表，同一名稱的縮寫盡量統一。 
    * 所選用的單詞應選擇不過於具體表示某一狀態（如顏色、大小等）的單詞，以避免當狀態改變時名稱失去意義。 
    * 由不以數字開頭的小寫字母（a-z）、數字（0-9）組成。 
    * 確保類(.class)的重用性與對象(#id)的唯一性，id避免使用保留字。 

　　例： 

Java代碼  

1. 模組首碼：  
2.   
3.   * 彈出 pop  
4.   * 公用 global,gb  
5.   * 標題 title,tit  
6.   * 提示 hint  
7.   * 菜單 menu  
8.   * 資訊 info  
9.   * 預覽 pvw  
10.   * Tips tips  
11.   * 導航 nav  
12.   
13. 類型：  
14.   
15.   * 按鈕 bt  
16.   * 文本 tx  
17.   * 段落 p  
18.   * 表徵圖 icon  
19.   * input input  
20.   * 顏色 color,c  
21.   * 背景 bg  
22.   * 邊框 bor  
23.   
24. 作用：  
25.   
26.   * 設定 set  
27.   * 添加 add  
28.   * 刪除 del  
29.   * 操作 op  
30.   * 密碼 pw  
31.   * 匯入 inc  
32.   
33. 狀態：  
34.   
35.   * 成功 suc  
36.   * 失敗 lost  
37.   * 透明 tran  
38.   
39. 位置：  
40.   
41.   * 公用 gb  
42.   * 邊框 bor  
43.   * 段落 p  
44.   * 彈出 pop  
45.   * 標題 title,tit  
46.   * 菜單 menu  
47.   * 內容 cont  
48.   * 導航 nav  

中文解釋 命名        中文解釋         命名 
文本輸入框 .input_tx 段落文本顏色        .c_tx_p 
密碼輸入框 .input_pw 相簿彈出的設定層 .pop_set_photo 
登入密碼輸入框 .input_pw_login 日誌設定成功提示 .hint_suc_blogset 
文本顏色 .c_tx 公用提示 .hint_gb 

問幾個簡單的問題，可以協助我們完成命名： 

   1. “什麼類型的定義？”——是個輸入框，input。 
   2. “類型補充說明”——如果一個詞說明不清楚，那麼補充說明類型，文本輸入框，input_tx。 
   3. “在哪使用？”——定義要使用的位置在哪？首頁的搜尋文本輸入框，input_search_index。 

　　結合“模組化”相關的方法去定義，其實所需要定義的名稱並不需要很多。 如：“hint_tx”表示提示模組的文字定義，“hit_tx_hint”表示提示裡文字強調的定義，至於是改變顏色還是加粗，這個就看不同提示模組的需要了。

對於css書寫順序？

<html>
<body>
<div style="width:300px; height:100px; background:#111"></div><div style="width:300px; height:100px;"> <div style="width:100px; height:100px; float:left; background:#222"></div> <div style="width:100px; height:100px; float:left; background:#333"></div> <div style="width:100px; height:100px; float:left; background:#444"></div></div><div style="width:300px; height:100px; background:#555"></div>
</body>
</html>
 
div+CSS的命名規則？

在網頁製作中，有許多的術語，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關於HTML的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。
所有的設計第一步就是構思，構思好了，一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟體將需要製作的介面布局簡單的構畫出來，以下是我構思好的介面布局圖。

下面，我們需要根據構思圖來規劃一下頁面的布局，仔細分析一下該圖，我們不難發現，圖片大致分為以下幾個部分：
　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；
　　2、內容部分又可分為側邊欄、主體內容；
　　3、底部，包括一些著作權資訊。
　　有了以上的分析，我們就可以很容易的布局了，我們設計層如:

根據，我再畫了一個實際的頁面配置圖，說明一下層的嵌套關係，這樣理解起來就會更簡單了。

　　DIV結構如下：
　　│body {}　/*這是一個HTML元素，具體我就不說明了*/
　　└#Container {}　/*頁面層容器*/
　　　　　├#Header {}　/*頁面頭部*/
　　　　　├#PageBody {}　/*頁面主體*/
　　　　　│　├#Sidebar {}　/*側邊欄*/
　　　　　│　└#MainBody {}　/*主體內容*/
　　　　　└#Footer {}　/*頁面底部*/
至此，頁面配置與規劃已經完成，接下來我們要做的就是開始書寫HTML代碼和CSS。