CSS屬性書寫順序及命名規則

/* mozilla.org Base Styles
 * maintained by fantasai
 */
/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */
...

 來源：

    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書寫順序爲：

 1. Display & Flow
 2. Positioning
 3. Dimensions
 4. Margins, Padding, Borders, Outline
 5. Typographic Styles
 6. Backgrounds
 7. Opacity, Cursors, Generated Content

例子：

el {
	display: ;
	visibility: ;
	float: ;
	clear: ;

	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;

	width: ;
	min-width: ;
	max-width: ;
	height: ;
	min-height: ;
	max-height: ;
	overflow: ;

	margin: ;
	margin-top: ;
	margin-right: ;
	margin-bottom: ;
	margin-left: ;

	padding: ;
	padding-top: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: ;

	border: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;

	border-width: ;
	border-top-width: ;
	border-right-width: ;
	border-bottom-width: ;
	border-left-width: ;

	border-style: ;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;

	border-color: ;
	border-top-color: ;
	border-right-color: ;
	border-bottom-color: ;
	border-left-color: ;

	outline: ;
	list-style: ;

	table-layout: ;
	caption-side: ;
	border-collapse: ;
	border-spacing: ;
	empty-cells: ;

	font: ;
	font-family: ;
	font-size: ;
	line-height: ;
	font-weight: ;
	text-align: ;
	text-indent: ;
	text-transform: ;
	text-decoration: ;
	letter-spacing: ;
	word-spacing: ;
	white-space: ;
	vertical-align: ;
	color: ;

	background: ;
	background-color: ;
	background-image: ;
	background-repeat: ;
	background-position: ;

	opacity: ;
	cursor: ;
	content: ;
	quotes: ;
	}

 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避免使用保留字。

　　例：

　　模塊前綴：

    * 彈出 pop
    * 公共 global,gb
    * 標題 title,tit
    * 提示 hint
    * 菜單 menu
    * 信息 info
    * 預覽 pvw
    * Tips tips
    * 導航 nav

　　類型：

    * 按鈕 bt
    * 文本 tx
    * 段落 p
    * 圖標 icon
    * input input
    * 顏色 color,c
    * 背景 bg
    * 邊框 bor

　　做用：

    * 設置 set
    * 添加 add
    * 刪除 del
    * 操做 op
    * 密碼 pw
    * 導入 inc

　　狀態：

    * 成功 suc
    * 失敗 lost
    * 透明 tran

　　位置：

    * 公共 gb
    * 邊框 bor
    * 段落 p
    * 彈出 pop
    * 標題 title,tit
    * 菜單 menu
    * 內容 cont
    * 導航 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」表示提示裏文字強調的定義，至因而改變顏色仍是加粗，這個就看不一樣提示模塊的須要了。