)CSS命名與書寫

http://www.iqianduan.com/post/29.html 

1、css樣式命名：

1.總的原則要語義化，避免結構化。例如：一個導航條，可以分配ID為rightHandNav，因為你希望他出現在右邊。但是，如果以後將他的位置改在左邊，那麼css和(x)html就會不同步。所以將這個元素命名為subNav或者secondNav更合適。
2.樣式名稱可由貼近語義的英文片語、規範易懂可接受的英文簡稱、數字、中杠（-）和底線（_）來命名，減少用中文拼音的習慣，杜絕使用中文（雖然可以支援）。

2、css名稱書寫原則：
1.單個詞全部小寫。例如：外容器，可用container或者wrapper；
2.多個片語有兩種寫法：第一種是全部小寫，並用中杠（-）或底線（_）將片語隔開，例如：主版塊新聞，可以用main_news或main-news（個人推薦前者）；另一種方法叫“駝峰命名法”。多個單片語合在一起，第一個單詞小寫，第二個單字首大寫，如:newRelease（最新產品/new+Release)。
3.盡量避免太多單詞的組合，記憶和維護都不方便。

3、css屬性分類：
縱觀css常用屬性，大致可以分為四類：自身屬性、文字屬性、布局定位屬性和其他屬性。自身屬性主要包括：width（寬）、height（高）、background（背景）、border（邊框）；文字屬性主要包括：font（字型）、color（顏色）、text-align（對齊）、text-decoration（文本修飾）、text-indent（縮排）等；布局定位屬性主要包括：margin（外補丁）、padding（內間距）、float（浮動，包括clear）、position（定位，相應的top,right,bottom,left）、display、visibility 、overflow（溢出）等；其他屬性包括：list-style(列表樣式)、vertical-vlign（垂直對齊）、cursor（游標類型）、z-index（層疊順序）、zoom等。我所列出的這些屬性只是最常用到的，不代表全部。
 
4、css屬性書寫順序。
這個問題可能有的人覺的沒有必要討論，每個人都各有習慣，不好強求。但我覺得，系統的，有規則的排列還是很有必要的。而我的樣式書寫順序，恰恰用到了上面提到的屬性分類。基本順序是：自身屬性->布局定位屬性->文字屬性->其他。我所理解的這個順序，主要是通過視覺而進行定位的，比如看到一台電視機，首先是他的大小、顏色外觀性的東西；然後才會關注他的位置，究竟是在電視柜上還是沙發？接下來開啟電視，欣賞精彩的節目。。。至於每個分類裡具體屬性的順序，則可以按照首字母的順序，也可以根據自己的習慣。關於此項另見http://www.cnblogs.com/zllwebjs/articles/1728832.html

5、css屬性的排列。
是單個樣式一行到底還是逐行短句？多層結構樣式是繼承還是縮排？
從可讀性和維護性角度考慮，逐行短句更好，對於初學者也容易讀懂；但對於一個大站來說，會有很多的樣式，如果都採用這樣的書寫，會對頁面空間造成極大的浪費，而且太多行找起來也不是很容易。對css掌握比較熟練後其實可以試著單行書寫，這樣不用總是換行，也提高了工作效率。或者有種折中的方法：利用我上面講到的屬性書寫順序，每類屬性寫一行，這樣對於有很多屬性的樣式也只有4行，如果少的話就直接寫在一行。
至於第二個疑問，從個人角度講，如果是多層結構，繼承要比縮排好。因為繼承可以直觀的表現出各個樣式的關係，而且可以通過不同結構的優先順序來控制樣式的顯示效果。有個小問題，理論上講，樣式嵌套不易太多層，因為會影響樣式的讀取速度，建議嵌套不要超過5層。所以，在採用這種結構時，一定要靈活的把控機構，相信這點對於你一定是遊刃有餘。