雖然我只是剛踏入web前端開發圈子。在一次次任務里頭，我發覺每一次的css命名都有所不同和不知所措。腦海就誕生了一個想法——模仿大神的css命名樣式。
畢竟日后工作上，是需要多個成員共同協作的。如果沒有良好的命名，就會造成許多沒必要的耽誤和麻煩。
命名空間的規范：
布局：以 g 為命名空間，例如：.g-wrap 、.g-header、.g-content。
狀態：以 s 為命名空間，表示動態的、具有交互性質的狀態，例如：.s-current、s-selected。
工具：以 u 為命名空間，表示不耦合業務邏輯的、可復用的的工具，例如：u-clearfix（清除浮動）、u-ellipsis（省略）。
組件：以 m 為命名空間，表示可復用、移植的組件模塊，例如：m-slider（滑動）、m-dropMenu（下拉菜單）。
鈎子：以 j 為命名空間，表示特定給 JavaScript 調用的類名，例如：j-request、j-open。
引用於：大神ChokCoco
樣式屬性的規范：
單個樣式規則下的屬性在書寫時，應按功能進行分組，並以 Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。
如果包含 content 屬性，應放在最前面；
Positioning Model 布局方式、位置，相關屬性包括：position / top / right / bottom / left / z-index / display / float / ...
Box Model 盒模型，相關屬性包括：width / height / padding / margin / border / overflow / ...
Typographic 文本排版，相關屬性包括：font / line-height / text-align / word-wrap / ...
Visual 視覺外觀，相關屬性包括：color / background / list-style / transform / animation / transition / ...
引用於：大神ChokCoco
positioning排在第一位，因為它可以使一個元素脫離正常文檔流，box決定了一個組件的大小。其他屬性只在內部起作用。
面向屬性的命名：不要管頁面什么位置，什么內容，面向屬性的命名”就是針對自身屬性的一種命名方式
.tr{text-align:right;}
.pb8{padding-bottom:8px;}
雙標簽方法&寬度分離原則
.w470{width:470px;}
.inset{padding:20px; border:1px solid #ddd;}
這樣padding與border就會自適應width。Width就變成主動了。外層標簽就負責寬度或者與之分離的margin屬性，以提高CSS的重用性以及頁面的容錯與自適應能力。
“分離”思想下的命名只針對屬性本身, “無分離”思想的命名是針對頁面內容，所以上述改為：
.txtw1{width:470px;}
.inset1{padding:20px; border:1px solid #ddd;}
當以后發現其他部分也用到width470px，可以合並為
.txtw1,.w470{width:470px;}
要注意，只有頁面要使用到與文本框獨立寬度一樣寬度的時候才進行分離並合並
精簡高效CSS命名之“三無原則”
no id
no 輩分層級
no 標簽
引用於：大神張鑫旭
還有就是附上一些常用的特殊符號
 ：牛逼(nb)空格(sp - space)，容易受影響。
&ensp：惡念(e n-ian)空格占據的寬度正好是1/2個中文寬度，而且基本上不受字體影響。
&emsp：惡魔(e m-o)空格占據的寬度正好是1個中文寬度，而且基本上不受字體影響。
‹&lsaquo ›&rsaquo√&radic××