最近看到了些關於css命名方面的文章，對於這方面我也有自己的看法。
我接觸css有很長一段時間了，對於css的命名我也是在逐步改進。
感覺工作中比較常碰見的問題：
1.需要給層定義各種尺寸的寬度，高度基本是不用定義的
2.層的padding和層之間的margin
3.給文字高亮顏色
4.各種樣式的tab和button
5.不同的背景色
6.各種樣式的border
7.左浮動，右浮動
8.粗體，斜體
9.居左，居中，居右，垂直居頂，居中，居底對齊
1.需要給層定義各種尺寸的寬度，高度基本是不用定義的
以em為單位的是彈性布局,目前瀏覽器都支援頁面整體縮放，不太可能會用到調整瀏覽器字型大小，所以層的寬度沒有必要設定成em單位，「是時候不用考慮基於字型大小（em）的設計了」
以%為單位的是流體布局,這種布局比較難控制，用的較少
最常見的是以px為單位的固定布局，需要定義以px單位的頁面通常是柵格布局
那麼不了解柵格的朋友可以先看看，"網頁的柵格系統設計"
首先保證頁面的寬度一定是950px,分成24列，這個時候就要定義24種可能情況的寬度
我目前只用過blueprint框架，它採用的命名方式是：
.span-1
.span-2
.span-3
.span-4
.span-5
.span-6
.span-7
.span-8
.span-9
.span-10
.span-11
.span-12
.span-13
.span-14
.span-15
.span-16
.span-17
.span-18
.span-19
.span-20
.span-21
.span-22
.span-23
.span-24
我個人覺得span根據標籤意思是內聯元素，內聯元素是不能定義寬度的，這裡span不太合適。
採用grid-1,grid-2,...grid-24或者w-1,w-2,...w-24會更合適
2.層的padding和層之間的margin
柵格布局每列之間的間距是10px，所以層之間的margin的全域性定義方式：
.w-1,.w-2,...,.w-23
最大寬度w-24剛好是950px，不需要定義margin。
少數一些時候用到w-1,w-2,...,w-23時列之間可能不需要margin-right，這時需要定義
.last去reset之間的
我們還需要定義些常用到的margin和padding，於是有：
.ml-10
.mr-10
.mt-10
.mb-10
.pl-10
.pr-10
.pt-10
.pb-10
mg-10
pd-10
...以次類推
3.給文字高亮
專案中這個需求一直在變動，通常要定義幾種全域性的高亮顏色.
常見的命名方式是.red或者.hightlight-red...，class中含有顏色的名字這種方式其實不好。
專案中如果需要新增換色的功能，需要用其它顏色的樣式表reset之間的樣式表，那之前定義的高亮顏色在其它顏色中就不一定適合，而class卻還要用原來的，這樣就不語義化了。
就算不考慮換色功能，但希望做出來的頁面能更加滿足使用者的感受，這個高亮的顏色也可能一直在變的。
所以建議用hightlight-1,hightlight-2...,通常高亮顏色在1到3種之間，不會太多,容易記住。
4.各種樣式的tab和button
.tab-1
....button-1
...5.不同的背景色
.bc-1
...6.各種樣式的border
.b1s-1
.b1d-1
...4,5,6中之所以class中用-1而不用-color，理由跟第三種「給文字高亮」類似
7.左浮動，有浮動，
居左，居右，居中
.f-l
.f-r
.f-n
還有清浮動的
.c-b
.c-l
.c-r
8.粗體，斜體
與其定義class不如直接用相應的標籤，反正粗體或斜體的內容總歸需要放入乙個標籤中。
粗體就直接用,斜體直接用
9.居左
，居中，居右，垂直居
頂，居中，居底對齊
.ta-l
.ta-c
.ta-r
.va-t
.va-m
.va-b
css命名規範
良好的命名規範可以為團隊合作開發推波助瀾，無論在專案開發，還是產品維護上都起到了至關重要的作用。應該說命名規範是一種約定，也是程式設計師之間良好溝通的橋梁。命名規則 2.樣式檔案命名 主要的 master.css 布局版面 layout.css 專欄 columns.css 文字 font.css ...
CSS命名規範
網上整理的比較好的css命名規則，為css 的規範化做參考，增加 的可讀性。id的命名 1 頁面結構 2 導航 1.不使用大寫形式的類名和id名 2.盡可能使用描述性的英文單詞的組合作為類名和id名 3.id名及類名的多個英文單詞之間使用 短橫線分隔 4.按區域進行描述編號 例 main01 div...
css命名規範
class的命名 1 顏色 使用顏色的名稱或者16進製制 如 red f60 ff8600 2 字型大小,直接使用 font 字型大小 作為名稱,如 font12px font9pt 3 對齊樣式,使用對齊目標的英文名稱,如 left bottom 4 標題欄樣式,使用 類別 功能 的方式命名,如 ...